Question

我正在尝试使用菜单上的border-right实现分隔符效果。这是我的css代码

ul.navigation li a {
text-decoration:none;
float:left;
width:252px;
height:50px;
display:block;
background-color:#ccc;
text-align:center;
line-height:45px;
color:#000;
position:relative;
border-right:1px solid #333;
}

ul.navigation li a:last-child {
border:none;
}

我做错了什么？我也尝试了border-left和:first-child。

Answer 1

我在想你的意思是

ul.navigation li:first-child a

因为每个a都是其父li的第一个孩子。你的意思是第一个li项目中的a。：）

Answer 2

您的CSS代码段中充满了不良做法。

下面是如何设置样式以及如何在每个列表项之间添加分隔符的示例。

.navigation { overflow: hidden; }    /* Explanation 1 */
.navigation li { float: left; }

.navigation li + li {                /* Explanation 2 */
    border-left: 1px solid #333;
}

.navigation li a {
    display: block;
    width: 252px;                    /* Explanation 3 */
    padding: 5px 0;                  /* Explanation 4 */

    background-color:#ccc;
    color:#000;
    text-align:center;            
}

浮动遏制：read this article。
我在这里回答你的问题：使用adiacent兄弟选择器+，将第二个li留下的边框应用到最后一个。{/ li>
您确定要固定宽度吗？
没有固定的高度和行高来垂直对齐文本。行高并不需要一个单位。 Read this article

以下是一个实例：http://dabblet.com/gist/4968063

伪类最后一个孩子

2 个答案: