引導 - 按鈕沒有正確對齊

我有一個ul與"nav nav-tabs nav-stacked"類這裏有一個裏面和一個"<a>"裏面和"<a>"裏面有兩個按鈕的類"pull-right btn btn-primary"。發生的事情是，按鈕粘在列表項的底部，我希望它們位於列表項的中間。引導 - 按鈕沒有正確對齊

因爲在這裏更關是：

HTML代碼：

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <ul class="nav nav-tabs nav-stacked" style="margin-top: 60px;"> 
      <?php 
      $all_connections = get_user_connection_requests($_SESSION["uid"]); 
      while($connection = mysql_fetch_assoc($all_connections)) { 
       echo "<li><a>{$connection["fName"]} {$connection['lName']}" 
      ?> 
      <button class="pull-right btn btn-primary ">Accept</button> 
      <button class="pull-right btn btn-danger ">Deny</button> 
      <?php echo "</a></li>"; } ?> 
     </ul> 
    </div> 
    <!--/row--> 
</div>

輸出： enter image description here

Full Size Image Here!

我想要的按鈕也在文字中間。

我該怎麼做？

任何幫助將不勝感激！ :)

來源

2013-04-07 Mohammad Areeb Siddiqui

什麼如果在文本之前放置按鈕*會發生？ – 2013-04-07 16:56:36

我不能這麼做，因爲LI是動態打印的，其次我不希望這種類型的佈局！ @ExplosionPills – 2013-04-07 16:59:20

你可以請創建jsfiddle嗎？ – 2013-04-07 17:01:15

試試這個：

來源

2013-04-07 17:51:49

我對代碼做了一些更改，因爲浮動元素會造成一些麻煩。

首先我添加了ID #something到ul列表只是爲了解決浮動問題。然後我添加了<span class="centered">以將文本包裹在您的錨標記中。

這裏是CSS

#something li a { 
    overflow: hidden; 
} 

.centered { 
    display: inline-block; 
    margin-top: 5px; 
}

，這裏是編輯HTML

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <ul id="something" class="nav nav-tabs nav-stacked" style="margin-top: 60px;"> 
      <li> 
       <a href=""> 
        <span class="centered">sssss</span> 
        <button class="pull-right btn btn-primary ">Accept</button> 
        <button class="pull-right btn btn-danger ">Deny</button> 
       </a> 
      </li> 
     </ul> 
    </div> 
    <!--/row--> 
</div>

DEMO

來源

2013-04-07 17:40:05

引導 - 按鈕沒有正確對齊

回答

相關問題