html – 使bootstrap导航栏分隔符均匀分布
发布时间:2020-12-14 23:26:35 所属栏目:资源 来源:网络整理
导读:我们如何使导航栏中的垂直分隔线均匀分布? 这是我目前正在使用的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 soli
我们如何使导航栏中的垂直分隔线均匀分布?
这是我目前正在使用的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 { 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> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |