Question

＆＃13;

.navbar-nav{
          margin: 0 auto;
          display: table;
          table-layout: fixed;
          float:none;
      }

      .navbar-collapse ul li a {
        border-right: 1px solid #c0c0c0;
        padding: 0 10px;
        margin-top:15px;
      }
       .navbar-collapse ul li:last-child {
        border:none;
      }

＆＃13;

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav"> 
            <li><a href="#">MANUALS</a></li>
            <li><a href="#">NEWS</a></li>
            <li><a href="#">SPARE PART</a></li>
            <li><a href="#">WHERE TO BUY</a></li>
            <li><a href="#">SUPPORT</a></li>
            <li><a href="#">EDIT BOOK</a></li>
            <li><a href="#">ADMIN</a></li>
          </ul>
        </div>

＆＃13;

我需要git摆脱我最后一个li项目的右边界。我设置了border：none for li：last-child但是没有工作。

我想念的一切？

Answer 1

您的样式问题是您应首先定位li的{{1}}，然后定位last-child

为修复添加以下css

<强> CSS

Fiddle

Answer 2

您应该使用li定位last-child元素，然后将规则应用于a标记。

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

Answer 3

＆＃13;

.navbar-nav{
          margin: 0 auto;
          display: table;
          table-layout: fixed;
          float:none;
      }

      .navbar-collapse ul li a {
        border-right: 1px solid #c0c0c0;
        padding: 0 10px;
        margin-top:15px;
      }
       .navbar-collapse ul li:last-child a{
        border:none;
      }

＆＃13;

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav"> 
            <li><a href="#">MANUALS</a></li>
            <li><a href="#">NEWS</a></li>
            <li><a href="#">SPARE PART</a></li>
            <li><a href="#">WHERE TO BUY</a></li>
            <li><a href="#">SUPPORT</a></li>
            <li><a href="#">EDIT BOOK</a></li>
            <li><a href="#">ADMIN</a></li>
          </ul>
        </div>

＆＃13;

在a

内的li:last-child上应用样式

Answer 4

使用此

.navbar-collapse ul li:last-child a{
    border-right:none;
}

这是运行示例

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
    .navbar-nav{
              margin: 0 auto;
              display: table;
              table-layout: fixed;
              float:none;
          }

          .navbar-collapse ul li a {
            border-right: 1px solid #c0c0c0;
            padding: 0 10px;
            margin-top:15px;
          }
           .navbar-collapse ul li:last-child a{
		     
            border-right:none;
          }

</style>

  



</head>
<body>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav"> 
            <li><a href="#">MANUALS</a></li>
            <li><a href="#">NEWS</a></li>
            <li><a href="#">SPARE PART</a></li>
            <li><a href="#">WHERE TO BUY</a></li>
            <li><a href="#">SUPPORT</a></li>
            <li><a href="#">EDIT BOOK</a></li>
            <li><a href="#">ADMIN</a></li>
        </ul>
    </div>
</body>
</html>

为什么这个李：最后一个孩子不能为我的无序列表工作？

4 个答案:

这是运行示例