html - css: Bootstrap 下拉菜单右对齐图标

Question

我正在尝试将图标添加到标准 Bootstrap 下拉菜单。左边的图标很好，但我正在添加辅助图标，我希望这些图标 float :向右并在单行中对齐。

目标:我希望辅助图标在右侧对齐，因为主要图标在左侧

下面是我如何添加辅助图标，class "sec"

<li>
  <a href="#"><i class="fa fa-save"></i>
     SomeText
  <i class="sec fa fa-user"></i>
  </a>
</li>

JSFIDDLE: http://jsfiddle.net/bababalcksheep/ydmnf0wt/6/

HTML:

<div class="row">
    <div id="test" class="col-md-4">
        <div class="btn-group">
            <button data-toggle="dropdown" type="button" class="btn blue dropdown-toggle">
                Dropdown <i class="fa fa-angle-down"></i>
            </button>
            <ul role="menu" class="dropdown-menu">
                <li>
                    <a href="#"><i class="fa fa-save"></i>Action ActionActionActio 
                    <i class="sec fa fa-user"></i>
                    </a>
                </li>
                <li class="divider"></li>
                <li>
                    <a href="#"><i class="fa fa-save"></i>View  
                    <i class="sec fa fa-user"></i>
                    </a>
                </li>
                <li class="divider"></li>
                <li>
                    <a href="#"><i class="fa fa-save"></i>Custom view 2  
                    <i class="sec fa fa-user"></i>
                    </a>
                </li>
                <li class="divider"></li>
                <li>
                    <a href="#"><i class="fa fa-save"></i>Custom view 21  
                    </a>
                </li>
                <li class="divider"></li>
                <li>
                    <a href="#">Custom view 43  
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div> 

CSS:

.dropdown-menu > li > a > i {
    margin-right: 5px;
}
.dropdown-menu  i.sec
{
    display: inline-block;
    font-size: 14px; 
    font-weight: 300;
    height: auto;
}

Answer 1

你应该像这样修改 CSS:

body {
    background-color : white !important;
}
@import url(netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css);

.dropdown-menu{
    width:250px;
}

.dropdown-menu > li > a {
    margin-right: 5px;
    height:30px;
}

.dropdown-menu > li > a > i {
    margin-right: 5px;
}

.dropdown-menu > li > a > i.sec
{
    display: inline-block;
    font-size: 14px; 
    font-weight: 300;
    height: auto;
    float:right; 
}

.dropdown-menu > li > a > i.first
{
    display: inline-block;
    font-size: 14px; 
    font-weight: 300;
    height: auto;
    float:left; 
}

.dropdown-menu > li > a > .text
{
    float:left;
    display: inline-block;
}

还像这样修改每个菜单:

<li>
    <a href="#">
        <i class="first fa fa-save"></i>
        <span class="text">Action ActionActionActio</span>
        <i class="sec fa fa-user"></i>
    </a>
</li>

<强> Check This JSFiddle.