css - Bootstrap - 如何将快速 float 的列表项内容保持在一行？

Question

我遇到了以下问题 - 当我将带有向右拉类的字形图标添加到 li 选项时，只要 li 中的文本不太长，它看起来就没问题。如果是，字形图标会被推到文本下方(我猜是下一行)。我怎样才能让它保持在同一行？

<div class="btn-group btn-group-justified">
    <div class="btn-group open">
        <button type="button" data-toggle="dropdown" class="btn btn-default btn-danger dropdown-toggle">Input <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a id="1" class="cursor-hand">Very long text here<span class="glyphicon glyphicon-ok text-danger pull-right"></span></a>
        </li>
        <li><a id="2" class="cursor-hand">Empty option</a>
        </li>
        <li><a id="41" class="cursor-hand">Short<span class="glyphicon glyphicon-ok text-danger pull-right"></span></a>
        </li>
    </ul>
</div>

另一件非常烦人的事情是，这种情况一直发生在 FF 30.0(此处运行 Win XP)中，而 Chrome 和 IE(在 8.0 中测试)至少试图使文本和图标保持一致。

这是一个显示问题的 fiddle http://jsfiddle.net/ukgAY/

Answer 1

您需要删除右拉并手动定位复选框:我用 pright 类替换了右拉

ul li a  {position: relative }
.pright {position: absolute; right: 0;}

参见 http://jsfiddle.net/3JgND/