排列組項目中的對齊按鈕

Question

我想要適合列表組項目中的按鈕，但它看起來很可怕（按鈕超出列表組項目的高度）：

<ul class="list-group"> 
     <li class="list-group-item">Sound1 
      <form class="form-inline pull-right vertical-align"> 
       <button class="btn btn-md btn-default" type="button"><span class="glyphicon glyphicon-play"></span></button> 
      </form><span class="badge" style="margin-right: 10px;">0:58</span> 
     </li> 
     <li class="list-group-item">Sound2 
      <form class="form-inline pull-right vertical-align"> 
       <button class="btn btn-md btn-default" type="button"><span class="glyphicon glyphicon-play"></span></button> 
      </form><span class="badge" style="margin-right: 10px;">0:15</span> 
     </li> 
     <li class="list-group-item">Sound3 
      <form class="form-inline pull-right vertical-align"> 
       <button class="btn btn-md btn-default" type="button"><span class="glyphicon glyphicon-play"></span></button> 
      </form><span class="badge" style="margin-right: 10px;">0:07</span> 
     </li> 
    </ul> 

我該如何正確實施？

Answer 1

在這裏，你去了一個解決方案https://jsfiddle.net/7dwaxo72/

form { 
 
    margin-top: -7px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<ul class="list-group"> 
 
     <li class="list-group-item">Sound1 
 
      <form class="form-inline pull-right vertical-align"> 
 
       <span class="badge" style="margin-right: 10px;">0:58</span> 
 
       <button class="btn btn-md btn-default" type="button"><span class="glyphicon glyphicon-play"></span></button> 
 
      </form> 
 
     </li> 
 
     <li class="list-group-item">Sound2 
 
      <form class="form-inline pull-right vertical-align"> 
 
       <span class="badge" style="margin-right: 10px;">0:15</span> 
 
       <button class="btn btn-md btn-default" type="button"><span class="glyphicon glyphicon-play"></span></button> 
 
      </form> 
 
     </li> 
 
     <li class="list-group-item">Sound3 
 
      <form class="form-inline pull-right vertical-align"> 
 
       <span class="badge" style="margin-right: 10px;">0:07</span> 
 
       <button class="btn btn-md btn-default" type="button"><span class="glyphicon glyphicon-play"></span></button> 
 
      </form> 
 
     </li> 
 
    </ul>

希望這會有所幫助。我已經改變了HTML結構。