html – 如何使用管道分隔链接项

概述这是我第一次在这里发帖提问. 我在网站设计上使用twitter bootstrap.我必须创建导航菜单,使其中列出的项目将与管道分开.我在这里找到了另一个类似的问题 – Add a pipe separator after items in an unordered list unless that item is the last on a line并且我使用了它,但是这些项目并没有像他们应该那 这是我第一次在这里发帖提问.

我在网站设计上使用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 >        <div >            <ul  >                <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;}

否则,您可能需要在psuedo元素之后添加定位：或者将显示更改为内联块 – 尽管很难说不能用提供的代码复制您的问题.

总结

以上是内存溢出为你收集整理的html – 如何使用管道分隔链接项全部内容，希望文章能够帮你解决html – 如何使用管道分隔链接项所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。