Question

我正在进行从PSD到HTML的第一次剪辑，但是在设置菜单方面存在问题。

我有以下代码

<ul>
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Contact</a></li>
</ul>

我想做的是将其设置为以下

Home  |  About  |  Contact

如何获得|在第一个之前的元素之间？

我很困惑，任何帮助都会很棒。

干杯，

Answer 1

这应该可以解决问题：

li { 
list-style-type: none; 
display: inline; 
border-left: 1px solid black; 
padding-left: 10px; 
margin-left: 10px;
}
ul li:first-child {
border-left: none;
}

在某些浏览器中您可能会注意到轻微的间距问题 - 这意味着10px在每一侧似乎都不相同。你也可以浮动：离开每个li来移除它，但是你必须在之后清除浮动，或者有一个固定的宽度和溢出：隐藏在父容器上。

Answer 2

 li + li::before {
   content: " | ";
 }

Answer 3

您应该向id添加class或<ul>，以便CSS规则不会影响网站中的所有其他<ul>。此外，以下CSS规则更适合，因为它们也适用于不支持:first-child和::before的浏览器。

<强> HTML：

<ul id="menu">
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Contact</a></li>
</ul>

<强> CSS：

ul#menu {
    margin:0;
    padding:0;
    overflow:hidden;
}
ul#menu li {
    float:left;
    padding:0 2em;
    margin-left:-1px;
    border-left:1px solid #333;
}

演示： jsfiddle.net/Marcel/gqJWm

CSS - 使用<ul> </ul>的菜单

3 个答案: