我尝试在我的菜单中将/
l个元素添加为菜单分隔符之后的li
- 使用Bootstrap作为基础。
可以在此处找到代码:http://jsfiddle.net/zBxAB/1/
正如您所看到的斜杠正在包装到下一行,我试图使用inline-block
来解决这个问题。
可以修复吗?
(我可以通过选择锚标记来获得同样的工作,但如果可能的话,我宁愿不这样做。)
由于
HTML:
<nav class="navbar nav-main">
<div class="navbar-inner">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar">
</span>
</button>
<div class="nav-collapse">
<ul class="nav nav-pills"> <li class="portfolio"><a href=#o">Portfolio</a></li><li class="contact-me"><a href="#">Contact Me!</a></li><li class="last from-the-blog"><a href="#">From the Blog</a></li>
</ul>
</div>
</div>
</nav>
CSS:
.navbar .nav > li {
display: inline-block;
}
.navbar li:after {
content: "/";
display: inline-block;
}
.navbar li:last-child:after {
content: "";
}
答案 0 :(得分:0)
我不知道这是不是最好的方式,但绝对定位是可行的。
.navbar .nav > li {
display: inline-block;
position: relative;
}
.navbar li:after {
content: "/";
display: inline-block;
height: 12px;
width: 6px;
position: absolute;
right: 0;
top: 8px;
}
.navbar li:last-child:after {
content: "";
}