仅使用 CSS 的导航分隔符答案

【问题标题】：Navigation separators using only CSS仅使用 CSS 的导航分隔符
【发布时间】：2014-02-20 22:07:25
【问题描述】：

我正在尝试使用 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/

【问题讨论】：

li:not(::first-child) {border-left: 1px solid #000;}

标签： html css

【解决方案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;
}

【讨论】：

是的，成功了，我采用了第二种方法。谢谢:)

【解决方案2】：

This 应该适用于 IE8 及更高版本。有点像外星人的做法，但短了一点，用边框代替了管道。

.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 之间的空格，有关此的更多信息。

【讨论】：

感谢您的回答 :) 我更喜欢 Alien 先生的第二种方法，因为我不需要对 position 进行修改来实现它。