CSS的上一个子项不覆盖父边界

Question

First of all let me start by saying I'm fairly new to CSS, mostly done styling inline. What I'm doing is using an <ul> as a menu, where the <li> items are menu items. Right borders are used as dividers between the menu items, but visually it would be better if the last menu item doesn't have the right border.

CSS code

.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>

I can only assume it has something to do with the after element as the margin is actually being added in the right place, but I can't figure it out.

Thanks in advance.

Answer 1

I've used your HTML and wrote minimal CSS for you to understand

TIP : Give classes and id's name which have semantic meaning to it. It is difficult to code when you give class names like these.

 .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; } 

 <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> 

Answer 2

You don't need any :after .

Here is a solution with a few advices :

https://jsfiddle.net/c4Lrmpfx/

 .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; } 

 <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> 

Here I used the selector :not instead of having an other line to define the last-child as border-right: 0;

Here :not specifies that the :last-child won't be included for the following properties.

Answer 3

It looks like you're not far off... If you're trying to get them to display next to each other then you need to change your CSS to:

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