Question

我遇到了以下问题 - 当我将带有右拉类的glyphicon添加到li选项时，只要li中的文本不太长，它就会显示正常。如果是，则将glyphicon略微推到文本下方（我猜到下一行）。我怎样才能让它保持同一条线？

<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中测试）至少会尝试保持文本和图标一致。

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

的小提琴

Answer 1

您需要移除右拉并手动定位复选框：我用右侧替换了右拉

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

请参阅http://jsfiddle.net/3JgND/

Bootstrap - 如何通过快速浮动将列表项内容保存到一行？

1 个答案: