[英]How can I prevent content in :after from wrapping to next line?
I am trying to add a /
after my li
l elements in my menu as a menu divider - using Bootstrap as a base. 我想添加
/
后我li
在我的菜单分隔菜单L型单元-采用引导的位置。
The code can be found here: http://jsfiddle.net/zBxAB/1/ 可以在这里找到代码: http : //jsfiddle.net/zBxAB/1/
As you can see the slash is wrapping to the next line, I have tried to resolve this using inline-block
which isn't working. 如您所见,斜杠环绕到下一行,我试图使用行
inline-block
来解决此问题,但行不通。
Is it possible to fix? 有可能解决吗?
(I can get the same working by selecting the anchor tag but would rather not if possible.) (通过选择锚标记,我可以得到相同的效果,但如果可能的话,我宁愿不这样做。)
Thanks 谢谢
HTML: 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: CSS:
.navbar .nav > li {
display: inline-block;
}
.navbar li:after {
content: "/";
display: inline-block;
}
.navbar li:last-child:after {
content: "";
}
I don't know if it's the BEST way, but it's possible to do with absolute positioning. 我不知道这是否是最好的方法,但是绝对定位是可行的。
.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: "";
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.