Question

我不确定如何解决我正在做的事情。

我基本上试图实现上述目标。我有section代码和li代码列表，其中包含该行的hr标记。它们重叠得很差，并且不像我喜欢的那样平稳地坐着/看起来像。

HTML：

<section class="navigation">
    <li class="page_nav--one">One</li>
    <hr class="page_nav--line_break" />
    <li class="page_nav--two">Two</li>
    <li class="page_nav--three">Three</li>
</section>

和我的css看起来像：

.navigation {
    background: #fff;
    text-align: center;
    margin: 50px 0;
    display: block;

    .page_nav--line_break {
        position: absolute;
        display: block;
        height: 1px;
        top: -14px;
        border: 0;
        border-top: 1px solid #ccc;
        /* margin: 1em 0; */
        padding: 0;
        width: 400px;
        right: 202px;
        z-index: 999999;
    }

    li {
        display: inline-block;
        list-style: none;
        position: relative;
        margin: 10px 85px;
    }

    li:before {
        content: '';
        height: 16px;
        width: 16px;
        background-size: 16px 16px;
        position: absolute;
        top: -23px;
        left: 16px;
        margin: auto;
        cursor: pointer;
        pointer-events: none;
    }

    li:nth-child(1):before {
        background: url("trianle_image.png");
    }

    li:nth-child(2):before {
        left: 23px;
        background: url("trianle_image.png");
    }

    li:nth-child(3):before {
        left: 35px;
        background: url("trianle_image.png");
    }
}

有没有更好的方法/方式来实现我之后的事情或我正确的方式？

Answer 1

我可能会使用:after伪元素。

<div class="diamond"></div>
<div class="diamond"></div>
<div class="diamond"></div>

然后带有伪元素的CSS看起来像这样：

.diamond {
    width:10px;
    height:10px;
    position:relative:
    float:left;
    margin-right:100px;
}
.diamond:last-of-type {
    margin-right:0;
}
.diamond:after {
    content:""
    display:block;
    width:100px;
    height:1px;
    background-color:gray;
    position:absolute;
    top:5px;
    left:5px;
}
.diamond:last-of-type:after {
    display:none;
}

所以理论上说，后面的元素是你的线（就像你有的那样），它与两个元素之间的边距一样宽，放在你需要的地方。然后隐藏最后一个。

FIDDLE

三个div之间的行css，html

1 个答案: