Question

我正在尝试使用CSS创建分隔符，以保持语义，并从内容中删除样式。

但是，我想在每个<li>项下方设置一个边框。但是，:before选择器会扩展<li>元素的宽度，并且会创建一个不一致的边框。

我尝试过Separators For Navigation的答案，它使用与我类似的方法，并给出了同样的问题。

这是我的导航（基于标签的）

<nav class="innerNav">
    <ul>
        <li>One </li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
    </ul>
</nav>

和我的CSS

.innerNav li {
    display: inline-block;
    border-bottom: 3px solid red;
}

.innerNav li:before {
    content: "|";
    display: inline-block;
    color: blue;
    border: 0;
    padding-right: 10px;
}

.innerNav li:first-child:before {
    display: none;
}

这是一个小提琴：http://jsfiddle.net/XFd6D/

Answer 1

虽然您正在使用虚拟生成内容的:before伪，但仍会将其计入元素中，因此您的元素会延伸。

为了解决这个问题，请先使用margin-left让li先将它们分开，然后使用position: absolute;作为伪内容，然后使用left: -8px;定位它正确。

确保对position: relative;元素使用li。

Demo

.innerNav li {
    display: inline-block;
    border-bottom: 3px solid red;
    margin-left: 10px;
    position: relative;
}

.innerNav li:before {
    content: "|";
    position: absolute;
    left: -8px;
    color: blue;
    border: 0;
    padding-right: 10px;
}

.innerNav li:first-child:before {
    display: none;
}

您可以做的另一种方法是将li的文本封装在span元素中，然后将border-bottom分配给span元素，而不是将其用于li

使用范围

Demo

像

一样更改你的DOM

<ul>
    <li><span>One</span> </li>
    <li><span>Two</span></li>
    <li><span>Three</span></li>
    <li><span>Four</span></li>
</ul>

并将相关联的CSS转换为......

.innerNav li {
    display: inline-block;
}

.innerNav li span {
    border-bottom: 3px solid red;
}

.innerNav li:before {
    content: "|";
    display: inline-block;
    color: blue;
    border: 0;
    padding-right: 10px;
    padding-left: 10px;
}

.innerNav li:first-child:before {
    display: none;
}

Answer 2

This应该适用于IE8及更高版本。有点像Alien先生的做法，但有点短，带边框而不是使用烟斗。

.innerNav li {
    display: inline-block;
    border-bottom: 3px solid red;
    margin-right: 1em;
    position: relative;
}

.innerNav li + li:before {
    border-left: 1px solid blue;
    content:"";
    display: block;
    height: 100%;
    position: absolute;
    left: -0.5em;
    top: 0;
}

问题可能是<li>，here有关此问题的更多信息之间的空格。

仅使用CSS的导航分隔符

2 个答案: