这是我第一次在这里发布问题。
我正在使用 Twitter bootstrap 进行网站设计。我必须创建导航菜单,以便那里列出的元素将与管道分开。我在这里发现了另一个类似的问题 - Add a pipe separator after items in an unordered list unless that item is the last on a line我使用了它,但元素没有按照预期分开。
我需要得到什么:http://prntscr.com/4br2lb
在执行我在这里找到的帖子中的代码后,我得到了这个:http://prntscr.com/4br2yj
这是我的代码:
HTML:
<div class="navbar navbar-default navbar-static-top header-menu">
<div class="collapse navbar-collapse navHeaderMenuCollapse">
<ul class="nav navbar-nav navbar-middle navbar-text" style="float:none;margin: 0 auto; display: table;table-layout: fixed;">
<li><a href="#">HOME</a></li>
<li><a href="#">AUTO</a></li>
<li><a href="#">LIFE</a></li>
<li><a href="#">HEALTH</a></li>
<li><a href="#">BUSINESS</a></li>
<li><a href="#">MORE...</a></li>
</ul>
</div>
</div>
CSS:
ul li {
float: left; }
ul li:after {
content: "|"; padding: 0 .5em; }
提前致谢!
最佳答案
为什么不为除最后一个以外的每个 li
使用边框呢?例如:
Demo Fiddle
ul li:not(:last-child) {
border-right:1px solid grey;
margin-right:20px;
padding-right:20px;
}
否则,您可能需要将定位添加到您的 :after
伪元素或将显示更改为 inline-block
- 虽然很难说不能使用提供的代码复制您的问题。
关于html - 如何用管道分离链接项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25247072/