Html css：引导下拉菜单右对齐图标

我正在尝试将图标添加到标准引导下拉菜单。 左边的图标很好，但我正在添加第二个图标，我希望这些图标浮动：右边，并在一行对齐

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

下面是我如何添加第二个图标，类“sec”

---

您应该这样修改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;
}

还可以按如下方式修改每个菜单：

---

我正在使用Chrome进行检查，工作正常，但在您使用FF和您的权限进行评论检查后，可能也会更新我对firefox的回答。等等，还有问题。您的解决方案使我的菜单现在取决于宽度。这不是以前。如何解决这个问题？宽度：250px，这是不可取的。菜单应该随着文本的移动而拉伸。。在引导中。下拉菜单没有宽度。我想就这样吧。

<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> 

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

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>