목록 그룹 그룹 항목 버튼 위치 지정

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"> 
 
     \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>