我怎样才能 float
或使我的所有插入符都在右边?
我关注这个answer在我的菜单中制作子插入符号。
但它显示插入符是 inline-block
并且我的子插入符看起来不对齐。
我希望子插入符像这样对齐,
这可能吗?
CSS,
.caret-right {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-left: 5px solid;
border-left-color:#999999;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
}
html,
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Category <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="el-dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown" style="border:1px solid red;">News - a very long title <b class="caret-right"></b></a>
<ul class="dropdown-menu">
<li><a href="#/3">Add</a></li>
<li><a href="#/4">Manage</a></li>
</ul>
</li>
<li class="el-dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Blog <b class="caret-right"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Add</a></li>
<li><a href="#">Manage</a></li>
</ul>
</li>
</ul>
</li>
编辑:
如果我将显示
float 到右边
,
最佳答案
要获得预期的结果,您应该更改标记。 <caret>
div 应该在文本之前。然后就可以给 float 权了;
<b class="caret-right"></b>
News - a very long title
CSS
.caret-right {
float:right;
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-left: 5px solid;
border-left-color:#999999;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
margin-top:5px;
margin-right:-8px;
}
关于html - Bootstrap 护理人员 : Making sub carets and float them to the right?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21903999/