Question

我必须在两个div之间放置箭头。下面是一个示例图像，以便您可以得到正确的想法：

这就是我目前的情况：

<style>
        .link{
            font-size: 14px;
            margin-bottom: 10px;
        }
        .link a{
            border: 1px solid #d8d8d8;
            border-radius: 1px;
            color: #222222;
            padding: 0.4rem;
            display: block;
            text-align: center;
            height: 55px;
            line-height: 20px;
        }
        .custom_padding{
            padding-top: 15px !important;
        }
        .panel_custom{
            width: 100%;
            float: left;
            padding: 1rem;
        }
        .custom_a{
            padding: 0 !important;
            text-align: right;
            width: 100%;
            background: #EFEFEF !important;
        }
        .custom_a:hover, .custom_a:active{
            background: #EFEFEF !important;
        }
    </style>

  <div class="row">

        <div class="large-8 columns">
            <div class="large-12 columns accordion" style="padding: 0;" data-accordion>
                <div class="panel radius panel_custom accordion-navigation active">
                    <a href="#Normal" class="custom_a">Normal Pay Cycle</a>
                    <div id="Normal" class="panel_custom content active">
                        <div class="large-3 columns link"><a href="/timeclock/rapid">TimeClock Rapid Entry</a></div>
                        <div class="large-3 columns link"><a href="/timeclock/all/hoursworked" style="padding: 5px 0 0 0;">Hours Worked<br>(Approve Hours)</a></div>
                        <div class="large-3 columns link"><a href="/employees?Actions=Pay_Employee" class="custom_padding">Pay Employee</a></div>
                        <div class="large-3 columns link"><a href="/processing/taxpayments">Pay Taxes Owed</a></div>
                    </div>
                </div>
            </div>
            <div class="large-12 columns accordion" style="padding: 0;" data-accordion>
                <div class="panel radius panel_custom accordion-navigation active">
                    <a href="#Common" class="custom_a">Common Report</a>
                    <div id="Common" class="panel_custom content active">
                        <div class="large-4 columns link"><a href="/reports/employertotal" class="custom_padding">Employer's Tax Total</a></div>
                        <div class="large-4 columns link"><a href="/reports/hoursworked" class="custom_padding">Hours Worked</a></div>
                        <div class="large-4 columns link"><a href="/reports/employees" class="custom_padding">Employee Report</a></div>

                        <div class="large-4 columns link"><a href="/timeclock/all/hoursworked">TimeClock Hours Worked</a></div>
                        <div class="large-4 columns link"><a href="/reports/hoursworked132" class="custom_padding">Hours Worked 132 Col</a></div>
                        <div class="large-4 columns link"><a href="/processing/schedulechecks">Schedule of Checks Printed</a></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="large-4 columns accordion" data-accordion>
            <div class="panel radius panel_custom accordion-navigation active">
                <a href="#Maintain" class="custom_a">Maintain Employees</a>
                <div id="Maintain" class="panel_custom content active">
                    <div class="large-6 columns link"><a href="/employees/newemployee">Add Employee</a></div>
                    <div class="large-6 columns link"><a href="/employees?Actions=Details" class="custom_padding">Details</a></div>

                    <div class="large-6 columns link"><a href="/employees?Actions=Payrate" class="custom_padding">Payrate</a></div>
                    <div class="large-6 columns link"><a href="/employees?Actions=Note" class="custom_padding">Note</a></div>

                    <div class="large-6 columns link"><a href="/employees?Actions=Taxes" class="custom_padding">Taxes</a></div>
                    <div class="large-6 columns link"><a href="/employees?Actions=Accrual" class="custom_padding">Accrual</a></div>

                    <div class="large-6 columns link"><a href="/employees?Actions=Deductions" class="custom_padding">Deductions</a></div>
                    <div class="large-6 columns link"><a href="/employees?Actions=Delete" class="custom_padding">Delete</a></div>
                </div>
            </div>
        </div>
    </div>

使用上面的HTML代码我想创建以下视图。这应该清楚地说明我想要什么。

Answer 1

您可以为此使用伪元素，例如:after表示行，:before表示三角形。要定位箭头，您可以将position: absolute与transform: translate()

一起使用

＆＃13;

ul {
  display: flex;
  list-style: none;
}
li {
  padding: 10px 25px;
  border: 1px solid black;
  margin: 0 25px;
  position: relative;
}
li:not(:last-child):after {
  content: '';
  height: 1px;
  background: black;
  width: 50px;
  position: absolute;
  right: -50px;
  top: 50%;
}
li:not(:last-child):before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  top: 50%;
  border-style: solid;
  border-width: 7px 0 7px 20px;
  border-color: transparent transparent transparent black;
  right: -50px;
  transform: translateY(-50%);
}

＆＃13;

<ul>
  <li>Li</li>
  <li>Li</li>
  <li>Li</li>
  <li>Li</li>
</ul>

＆＃13;

Answer 2

你可以这样做。

.border {
  height: 20px;
  width: 20px;
  border: 1px black solid;
  display: inline-block;
}
.arrow {
font-size: 25px;
color: red;
}

<div class="border">
</div><span class="arrow">&#8594;</span><div class="border">
</div>

然后根据需要用css编辑它。

Answer 3

添加更多内容，可能对某人有用

div.one, div.two, div.three {
    height: 100px;
    width: 100px;
    border: 1px solid blue;
    margin-bottom: 18px;
    position: relative;
}

div.first, div.second {
   position: relative;
    float:left;
    min-height:1px;
}

div.first, div.second {
   position: relative;
    float:left;
    min-height:1px;
}


div.three {
  left: 150px;
  top: 62px;
}

div.one:after, div.two:after {
    content: '';
    height: 1px;
    background: black;
    width: 75px;
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    left: 100px;
    position: absolute;
    top: 50%;
}
div.three:after {
    content: '';
    height: 1px;
    background: black;
    width: 75px;
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    left: -76px;
    position: absolute;
    top: 50%;
}

div.three:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  top: 50%;
  border-style: solid;
  border-width: 7px 0 7px 20px;
  border-color: transparent transparent transparent black;
  transform: translateY(-50%);
  left: -20px;
}
div.one:before {
   content: '';
    height: 121px;
    background: black;
    width: 1px;
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    position: absolute;
    top: 50%;
    left: 175px;
}

<div class="first">
  <div class="one">

  </div>

  <div class="two">

  </div>
</div>
<div class="second">
  <div class="three">

    </div>
</div>

如何使用html和css

3 个答案: