在同一水平線上對齊按鈕和li標籤

我想將按鈕和button和li對齊。在同一水平線上對齊按鈕和li標籤

這裏的fiddle

<button type="submit" class="btn btn-gray btn-sm">Log In</button> 
    <ul> 
     <li style="list-style-type:none;"> 
      <a class="btn btn-gray btn-sm" href="/password/recover">Forgot Password? 
      </a> 
     </li> 
    </ul>

來源

2016-04-27 Suraj

[看這個]（https://jsfiddle.net/j538zkwh/3/） –

添加類拉左到按鈕

<button type="submit" class="btn btn-gray btn-sm pull-left">Log In</button> 

<ul> 
<li style="list-style-type:none;"><a class="btn btn-gray btn-sm" href="/password/recover">Forgot Password?</a></li>

來源

2016-04-27 06:28:57 manu

正是我想要記住的。謝謝 – Suraj

您可以在此情況下，我做了顯示性能做兩種方式，display: inline-block;或float: left;。請注意，我還增加了兩個樣機類爲清楚起見，您可以將其更改爲任何

here is the fiddle

.btn__align { 
    display: inline-block; 
} 

.ul__element { 
    display: inline-block; 
}

來源

2016-04-27 06:24:56

謝謝你的回答，我用'pull-le ft'類按鈕上。 :) – Suraj

可以通過div或表做到這一點 https://jsfiddle.net/j538zkwh/5/

<table > 
      <td> 
       <td> 
       <button type="submit" class="btn btn-gray btn-sm">Log In</button> <a class="btn btn-gray btn-sm" href="/password/recover">Forgot Password? </a> 
       </td> 
     </tr> 
       </table>

來源

2016-04-27 06:30:21

感謝您的回答，我在左上角的按鈕上做了這個。 :) - – Suraj

嘗試在按鈕添加拉左類將解決的問題也覺得代碼貼在下面...

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<button type="submit" class="btn btn-gray btn-sm pull-left" >Log In</button> 
 
<ul> 
 
    <li style="list-style-type:none;"> 
 
    <a class="btn btn-gray btn-sm" href="/password/recover">Forgot Password? 
 
    </a> 
 
    </li> 
 
</ul>

來源

2016-04-27 06:31:59

簡單的方法是添加到您的CSS代碼

display:inline-block;

來源

2016-04-27 06:36:07

在同一水平線上對齊按鈕和li標籤

回答

相關問題