リストグループ項目ボタンを配置する

Question

私はこのリストグループ項目の例を、右に引っ張るべき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"> 
 
     \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>