定位列表组项目按钮

Question

我想创建这个列表组项目的例子下面有两个按钮（而不是一个），应该拉到右边，也是与列表组的项目高度相等本身：

在我有骨架工作的时刻，但你可以看到他们是不正确的定位。 谢谢。

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"> 
 
     \t <button class="btn btn-default" type="button">Go!</button> 
 
     \t </span> 
 

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

Answer 1

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

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" 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;"> 
 
     \t <button class="btn btn-default" type="button"><span>ᐅ</span> Go!</button> 
 
     \t </span> 
 

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