Question

请在此处查看jsfiddle：http://jsfiddle.net/aRJr2/

正如您在右上角看到的那样，下一个标签的左侧部分位于第一行，但其余部分位于第二行。

为了使它出现在同一行，我需要做哪些更改？

代码：

<div class="panel panel-default">
<div class="panel-heading">
    <h3 class="panel-title">Members</h3>
</div>
<div class="panel-body">
        <div class="label label-info">
            <span>James</span>
            <a class="action_modal" style="color: #FFF" href="http://bower.dev/delete_member/exp/186"><i class="glyphicon glyphicon-remove-sign"></i></a>
        </div>
        <div class="label label-info">
            <span>Robert</span>
            <a class="action_modal" style="color: #FFF" href="http://bower.dev/delete_member/exp/187"><i class="glyphicon glyphicon-remove-sign"></i></a>
        </div>
        <div class="label label-info">
            <span>Jessica</span>
            <a class="action_modal" style="color: #FFF" href="http://bower.dev/delete_member/exp/188"><i class="glyphicon glyphicon-remove-sign"></i></a>
        </div>
        <div class="label label-info">
            <span>Mark</span>
            <a class="action_modal" style="color: #FFF" href="http://bower.dev/delete_member/exp/189"><i class="glyphicon glyphicon-remove-sign"></i></a>
        </div>
        <div class="label label-info">
            <span>Alexandra</span>
            <a class="action_modal" style="color: #FFF" href="http://bower.dev/delete_member/exp/190"><i class="glyphicon glyphicon-remove-sign"></i></a>
        </div>
        <div class="label label-info">
            <span>Kathleen</span>
            <a class="action_modal" style="color: #FFF" href="http://bower.dev/delete_member/exp/191"><i class="glyphicon glyphicon-remove-sign"></i></a>
        </div>
        <div class="label label-info">
            <span>Lorraine</span>
            <a class="action_modal" style="color: #FFF" href="http://bower.dev/delete_member/exp/192"><i class="glyphicon glyphicon-remove-sign"></i></a>
        </div>
        <div class="label label-info">
            <span>Lucy</span>
            <a class="action_modal" style="color: #FFF" href="http://bower.dev/delete_member/exp/194"><i class="glyphicon glyphicon-remove-sign"></i></a>
        </div>
        <div class="label label-info">
            <span>Christina</span>
            <a class="action_modal" style="color: #FFF" href="http://bower.dev/delete_member/exp/195"><i class="glyphicon glyphicon-remove-sign"></i></a>
        </div>
        <div class="label label-info">
            <span>Bryan</span>
            <a class="action_modal" style="color: #FFF" href="http://bower.dev/delete_member/exp/196"><i class="glyphicon glyphicon-remove-sign"></i></a>
        </div>
        <div class="label label-info">
            <span>Melissa</span>
            <a class="action_modal" style="color: #FFF" href="http://bower.dev/delete_member/exp/197"><i class="glyphicon glyphicon-remove-sign"></i></a>
        </div>
        <div class="label label-info">
            <span>Patricia</span>
            <a class="action_modal" style="color: #FFF" href="http://bower.dev/delete_member/exp/198"><i class="glyphicon glyphicon-remove-sign"></i></a>
        </div>
        <div class="label label-info">
            <span>Andrew</span>
            <a class="action_modal" style="color: #FFF" href="http://bower.dev/delete_member/exp/199"><i class="glyphicon glyphicon-remove-sign"></i></a>
        </div>
        <a href="http://bower.dev/add_member" class="label label-success getviaajax"><i class="glyphicon glyphicon-plus-sign"></i> Add new</a>
</div>

Answer 1

无需重新排列HTML元素，就可以更改标签的显示属性，适当调整填充和行高：

.panel-body .label {
  display:inline-block;
  padding-top:0;
  padding-bottom:0;
  line-height:1.5em;
}

Answer 2

我能够这样做：

.label {
  display: inline-table;
  line-height: initial;
}

Answer 3

我修改了thouliha的代码。这将像预期和干净一样工作。

.label {
    display: inline-table;
    line-height: initial;
    margin-bottom: 2px;
}

Twitter Bootstrap（v3）多行标签

3 个答案: