Question

我正在创建导航菜单。导航（.nav）具有li，用于导航到不同的页面。每个li都是浮动的，宽度为20％，可以使用所有的屏幕宽度。

现在我需要在li ul li

内的.nav之间显示分隔符

我尝试在第一个li之后使用border-left，但由于所有的li都以百分比浮动以覆盖屏幕宽度，因此最后li会下降。并且左边/右边没有左/右轮廓。

如何在不中断li的宽度的情况下在li之间显示/制作分隔符，以便所有nav li都在一行中？

HTML：

<div id="footer-wrapper">
  <div id="footer">
    <ul class="nav">
      <li>
        <i class="fa fa-users"></i>
      </li>
      <li>
        <i class="fa fa-compass"></i>
      </li>
      <li>
        <i class="fa fa-envelope"></i>
      </li>
      <li>
        <i class="fa fa-bell"></i>
      </li>
      <li>
        <i class="fa fa-bars"></i>
      </li>
      <span class="clear_both"></span>
    </ul>
  </div>
</div>

的CSS：

#footer-wrapper {
    background: #00A7FF;
}


.nav {
    list-style: none;
}

.nav li {
    float: left;
    margin: 0;
    padding: 0;
    text-align: center;
    padding: 15px 0;
    cursor: pointer;
    transition: all .3s;
}

.nav li:hover {
    background: #393232;
    color: white;
}

#footer-wrapper #footer .nav li {
    width: 20%;
}

更新

codepen的演示。

Answer 1

像这样习惯了这个

Sibling Selectors 和 :after 和position relative定义您的li代码li + li:after标记并指定值content，position，left，top，bottom，border，如下所示

li + li:after

此处演示代码

＆＃13;

#footer-wrapper {
    background: #00A7FF;
  overflow:hidden;
}


.nav {
    list-style: none;margin:0;padding:0;width:100%;float:left;
}

.nav li {
    float: left;
  position:relative;
    margin: 0;
    padding: 0;
    text-align: center;
    padding: 15px 0;
    cursor: pointer;
    transition: all .3s;
}

.nav li:hover {
    background: #393232;
    color: white;
}
.nav li + li:after{
  content:"";
  position:absolute;
  left:0;
  border-left:solid 1px black;
  top:0;
  bottom:0;
}

#footer-wrapper #footer .nav li {
    width: 20%;
}

＆＃13;

<div id="footer-wrapper">
  <div id="footer">
    <ul class="nav">
      <li>
        <i class="fa fa-users"></i>
      </li>
      <li>
        <i class="fa fa-compass"></i>
      </li>
      <li>
        <i class="fa fa-envelope"></i>
      </li>
      <li>
        <i class="fa fa-bell"></i>
      </li>
      <li>
        <i class="fa fa-bars"></i>
      </li>
      <span class="clear_both"></span>
    </ul>
  </div>
</div>

＆＃13;

Answer 2

<div id="footer-wrapper">
  <div id="footer">
    <ul class="nav">
      <li>a
        <i class="fa fa-users"></i>
      </li>
      <li>b
        <i class="fa fa-compass"></i>
      </li>
      <li>c
        <i class="fa fa-envelope"></i>
      </li>
      <li>d
        <i class="fa fa-bell"></i>
      </li>
      <li>e
        <i class="fa fa-bars"></i>
      </li>
      <span class="clear_both"></span>
    </ul>
  </div>
</div>

<style>

#footer-wrapper {
    background: #00A7FF;
}


.nav {
    list-style: none;
}

.nav li {
    float: left;
    margin: 0;
    padding: 0;
    text-align: center;
    padding: 15px 0;
    cursor: pointer;
    transition: all .3s;
}

.nav li:hover {
    background: #393232;
    color: white;
}

#footer-wrapper #footer .nav li {
    width: 20%;
}
.nav li:before {
content: " | ";
}

.nav li:first-child:before {
content: none;
}
</style>

Answer 3

https://jsfiddle.net/06k7r2kr/2/

<div id="footer-wrapper"> <div id="footer"> <ul class="nav"> <li> <i class="fa fa-users"></i> </li> <li> <i class="fa fa-compass"></i> </li> <li> <i class="fa fa-envelope"></i> </li> <li> <i class="fa fa-bell"></i> </li> <li> <i class="fa fa-bars"></i> </li> <span class="clear_both"></span> </ul> </div> </div> 这是工作使用这个jsfiddle

Answer 4

这是我的方法：的 JSFiddle Demo

我的变化：

我在border-left: 1px solid #e0e;中添加了.nav li {.. }，因此分隔符（边框）显示并最终在第一个border-left: none;中添加li，因此首先li没有左分隔符。< / p>
.nav li { float: left; margin: 0; padding: 0; text-align: center; padding: 15px 0; cursor: pointer; transition: all .3s; border-left: 1px solid #e0e; } .nav li:first-child{ border-left: none; }

这里是所有代码

#footer-wrapper { background: #00A7FF; } .nav { list-style: none; } .nav li { float: left; margin: 0; padding: 0; text-align: center; padding: 15px 0; cursor: pointer; transition: all .3s; border-left: 1px solid #e0e; } .nav li:first-child{ border-left: none; } .nav li:hover { background: #393232; color: white; } #footer-wrapper #footer .nav li { width: 20%; }

<div id="footer-wrapper"> <div id="footer"> <ul class="nav"> <li> <i class="fa fa-users"></i> </li> <li> <i class="fa fa-compass"></i> </li> <li> <i class="fa fa-envelope"></i> </li> <li> <i class="fa fa-bell"></i> </li> <li> <i class="fa fa-bars"></i> </li> <span class="clear_both"></span> </ul> </div> </div>

显示元素之间的分隔符

4 个答案: