Question

首先让我先说我对CSS很新，主要是做内联样式。我正在做的是使用<ul>作为菜单，其中<li>项是菜单项。右边框用作菜单项之间的分隔线，但在视觉上最好是最后一个菜单项没有右边框。

CSS代码

.gf-menu.l1 > li > .item:after
{
    border-right: 1px solid #E3E3E3;
    bottom: 0;
    content: "";
    position: absolute;
    right: 0;
    top: 0;
}
.gf-menu.l1 > li:first-child
{
    margin-left: 5px;
}
.gf-menu.l1 > li:last-child 
{
    margin-right: 5px;
    border-right: 0;
}

HTML

<ul class="gf-menu l1 ">
    <li class="item487">
        <a class="item" href="link1">
            menu_item_1
        </a>      
    </li>
    <li class="item488">
        <a class="item" href="link2">
            menu_item_2
        </a>      
    </li>
    <li class="item489">
        <a class="item" href="link1">
            menu_item_2
        </a>      
    </li>
</ul>

我只能假设它与after元素有关，因为边距实际上是在正确的位置添加，但我无法弄明白。

提前致谢。

Answer 1

我已使用您的 HTML 并编写了最小的 CSS 供您理解

提示：提供具有语义含义的类和ID名称。当你给出类似这样的类名时，很难编码。

＆＃13;

.gf-menu.l1 li {
    display: inline-block;
    padding: 0 10px 0 10px;
    border-right: 1px solid red;
}

.gf-menu.l1 li:last-child {
    border-right: none;
}

＆＃13;

<ul class="gf-menu l1 ">
    <li class="item487">
        <a class="item" href="link1">
            menu_item_1
        </a>      
    </li>
    <li class="item488">
        <a class="item" href="link2">
            menu_item_2
        </a>      
    </li>
    <li class="item489">
        <a class="item" href="link1">
            menu_item_2
        </a>      
    </li>
</ul>

＆＃13;

Answer 2

您不需要任何:after。

这是一个包含一些建议的解决方案：

https://jsfiddle.net/c4Lrmpfx/

＆＃13;

.gf-menu.l1 {
   list-style: none;
}
.gf-menu.l1 > li {
   float: left;
   text-align: center;
}
.gf-menu.l1 > li a.item {
   /* Better to apply the style to the A instead of the LI,
       also to style the clickable area */
   display: block;
   padding: 10px;
   text-decoration: none;
   background-color: rgba(0,0,0,0.1);   
}
.gf-menu.l1 > li a.item:hover {
   background-color: rgba(0,0,0,0.2);
}

.gf-menu.l1 > li:not(:last-child) a.item{
   border-right: 1px solid #000;
}

＆＃13;

<ul class="gf-menu l1 ">
    <li class="item487">
        <a class="item" href="link1">
            menu_item_1
        </a>      
    </li>
    <li class="item488">
        <a class="item" href="link2">
            menu_item_2
        </a>      
    </li>
    <li class="item489">
        <a class="item" href="link1">
            menu_item_2
        </a>      
    </li>
</ul>

＆＃13;

我在这里使用了选择器:not，而不是使用其他行来将last-child定义为border-right: 0;

此处:not指定:last-child不包含在以下属性中。

Answer 3

看起来你并不遥远......如果您试图让它们彼此相邻显示，那么您需要将CSS更改为：

gf-menu.l1 li {
display: inline;
border-right: 1px solid black;
}

CSS last-child不会覆盖父边界

3 个答案: