定位列表组项按钮

Question

我正在尝试使用两个按钮（而不是一个）创建下面的list-group-item示例，这两个按钮应该向右拉，并且与list-group-item本身的高度相同：

目前我确实让骨架工作，但正如你所看到的那样，它们没有正确定位。 感谢。

li.group-btn {
  padding: 0;
  border-radius: 0;
}
.form-control,
.btn {
  border-radius: 0 !important;
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="col-md-6">
  <ul class="list-group">
    <li class="list-group-item">
      <div class="input-group">
        <span class="pull-right">
        	<button class="btn btn-default" type="button">Go!</button>
      	</span>

        <span class="pull-right">
        	<button class="btn btn-default" type="button">Go!</button>
      	</span>
        <span class="left">Cras justo odio</span>
      </div>
      <!-- /input-group -->
    </li>
  </ul>
</div>

Answer 1

您可以使用display: table; / display: table-cell;

＆＃13;

＆＃13;

li.group-btn {
  padding: 0;
  border-radius: 0;
}
.form-control,
.btn {
  border-radius: 0 !important;
}

＆＃13;

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="col-md-6">
  <ul class="list-group">
    <li class="list-group-item">
      <div class="input-group" style="display:table; width:100%;">

        <span style="display: table-cell; border:1px solid #ccc; padding: 0 8px; vertical-align: middle;">Cras justo odio</span>            
        
        <span style="display: table-cell; width: 40px;">
        	<button class="btn btn-default" type="button"><span>ᐅ</span> Go!</button>
      	</span>

        <span style="display: table-cell; width: 40px;">
        	<button class="btn btn-default" type="button"><span>ᐅ</span>  Go!</button>
      	</span>
        
      </div>
      <!-- /input-group -->
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;