0

我正在尝试在我的菜单上使用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。

4

2 回答 2

3

我在想你的意思是这样做

ul.navigation li:first-child a

因为 everya是其 parent 的第一个孩子li。你的意思是a里面的第一个 li 项目。:)

于 2013-02-16T16:54:10.417 回答
0

您的 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;            
}

  1. 浮动遏制：阅读这篇文章。

  2. 在这里，我回答您的问题：使用 adiacent 兄弟选择器将第二个 li 左侧的边框应用于最后一个边框+。

  3. 您确定要固定宽度吗？

  4. 没有固定的高度和行高来垂直对齐文本。顺便说一句，line-height 不需要单位。阅读这篇文章。

    这是一个活生生的例子：http ://dabblet.com/gist/4968063

于 2013-02-16T18:01:45.443 回答