我们如何使导航栏中的垂直分隔线均匀分布?
这是我目前正在使用的HTML和CSS.
HTML:
<li class="divider-vertical"><a href = "#">Contact Us</a></li>
CSS:
.divider-vertical { height: 50px; margin: 0 9px; border-left: 1px solid #F2F2F2; border-right: 1px solid #FFF; }
导航条代码:
<nav class="navbar navbar-default navbar-static-top" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse navHeaderCollapse"> <ul class="nav navbar-nav"> <li><a href = "#">Home</a></li> <li class="divider-vertical"><a href = "#">About</a></li> <li class="divider-vertical"><a href = "#">Jobs</a></li> <li class="divider-vertical"><a href = "#">Contact Us</a></li> <li class="divider-vertical"><a href = "#">Resources</a></li> </ul> </div> </nav>
解决方法
有几种方法可以达到你想要的效果.
这是一个快速解决方案,将解决您的问题,并为您提供所需的结果.
这是一个快速解决方案,将解决您的问题,并为您提供所需的结果.
.divider-vertical { height: 50px; margin: 0 0 0 9px; padding: 0 0 0 9px; border-left: 1px solid red; }
一个更好的方法,可以节省你一点点html写作将是做类似以下的事情:
>从HTML中删除.divider-vertical类
>设置.li元素的样式,在边框的同一侧使用边距和填充 – 在本例中为右边
>我们将使用Pseudo class:last-child从最后一个菜单项中删除一些css属性
li { border-right: 1px solid red; margin: 0 9px 0 0; padding: 0 9px 0 0; } li:last-child { border-right: none; }
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> <nav class="navbar navbar-default navbar-static-top" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse navHeaderCollapse"> <ul class="nav navbar-nav"> <li><a href = "#">Home</a></li> <li><a href = "#">About</a></li> <li><a href = "#">Jobs</a></li> <li><a href = "#">Resources</a></li> </ul> </div> </nav>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。