删除列表导航边框的最后一项 [英] removing last item of list nav border

问题描述

我正在努力删除导航列表最后一项上的管道"边框-我的代码-

<ul id="菜单"><li><a href="">首页</a></li><li><a href="">故事</a></li><li><a href="">讲述您的故事</a></li><li><a href="">奖品</a></li><li><a href="">如何提示</a></li>

还有我的 css

#menu li{向左飘浮;列表样式类型:无；显示:内联；填充:0 .9em；右边框:1px 实心 #d2d2d2;;}#菜单li.last{边界右:无；}

解决方案

li.last 不存在.如果你想这样做，你必须向最后一个列表项添加一个类属性:

<ul id="菜单"><li><a href="">首页</a></li><li><a href="">故事</a></li><li><a href="">讲述您的故事</a></li><li><a href="">奖品</a></li><li class="last"><a href="">如何提示</a></li>

和 css

#menu li{向左飘浮;列表样式类型:无；显示:内联；填充:0 .9em；右边框:1px 实心 #d2d2d2;;}#菜单li.last{边界右:无；}

im struggling to remove the "pipe" border i have on the last item of the nav list- my code-

<div id="header">
    <ul id="menu">
        <li><a href="">Home</a></li>
        <li><a href="">Stories</a></li>
        <li><a href="">Tell your story</a></li>
        <li><a href="">Prizes</a></li>
        <li><a href="">How to tips</a></li>
    </li>
</div>

And my css

#menu li{
    float:left;
    list-style-type: none;
    display:inline;
    padding:0 .9em;
    border-right:1px solid #d2d2d2;;
}
#menu li.last{
    border-right:none;
}

解决方案

li.last doesn't excists. If you want to do it like that you'll have to add a class property to the last list item:

<div id="header">
    <ul id="menu">
        <li><a href="">Home</a></li>
        <li><a href="">Stories</a></li>
        <li><a href="">Tell your story</a></li>
        <li><a href="">Prizes</a></li>
        <li class="last"><a href="">How to tips</a></li>
    </li>
</div>

And the css

#menu li{
    float:left;
    list-style-type: none;
    display:inline;
    padding:0 .9em;
    border-right:1px solid #d2d2d2;;
}
#menu li.last{
    border-right:none;
}

这篇关于删除列表导航边框的最后一项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！