html - 是否可以在下拉菜单中向右浮动两个带有超赞字体图标的链接

Question

在标准的 twitter bootstrap 导航栏下拉列表中，我想要三个链接，通常的文本链接，然后是两个 float 到右侧的超赞字体图标(也是链接)。

目前，如果在 li 元素中放置了多个链接，它会换行。

这就是我想要的。

http://www.bootply.com/F35vbPUBAu

Answer 1

只需稍微更改标记，并添加一些 CSS。参见 this updated demo .基本上，您需要删除一些填充和清除 float ，并向 anchor 添加 float ...

对于此 html(在下拉列表中):

<ul class="dropdown-menu">
    <li class="clearfix">
        <a href="#" class="pull-left fix-pad-right">Course One</a>
        <a href="#" class="pull-right fix-pad-left"><i class="fa fa-file-text-o"></i></a>
        <a href="#" class="pull-right fix-pad-mid"><i class="fa fa-book"></i></a>
    </li>
    <li class="clearfix">
        <a href="#" class="pull-left fix-pad-right">Course One</a>
        <a href="#" class="pull-right fix-pad-left"><i class="fa fa-file-text-o"></i></a>
        <a href="#" class="pull-right fix-pad-mid"><i class="fa fa-book"></i></a>
    </li>
    <li class="clearfix">
        <a href="#" class="pull-left fix-pad-right">Course One</a>
        <a href="#" class="pull-right fix-pad-left"><i class="fa fa-file-text-o"></i></a>
        <a href="#" class="pull-right fix-pad-mid"><i class="fa fa-book"></i></a>
    </li>
</ul>

这添加了 CSS:

.fix-pad-left, .fix-pad-right, .fix-pad-mid {
    clear: none !important;
}

.fix-pad-left {
    padding-left: 3px !important;
}

.fix-pad-right {
    padding-right: 3px !important;
}

.fix-pad-mid {
    padding: 3px 3px !important;
}

让它看起来像这样:

HTH:)