我如何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>
修改
如果我将display
浮动到right
,
答案 0 :(得分:6)
要获得所需的结果,您应该更改标记。 <caret>
div应该在文本之前。然后你可以向右浮动;
<强> Working Demo 强>
<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;
}
答案 1 :(得分:0)
您可以添加float: right
.caret-right {
float: right; /*Added */
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;
}
答案 2 :(得分:0)
旧问题,但你可以通过添加class =“pull-right”来实现。
<li><a href="#">2011 <span class="caret-right pull-right"></span></a></li>
CSS
.caret-right {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-left: 5px solid;
border-left-color:#1c2b36;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
}