单选按钮没有在菜单中正确对齐

我有一个导航条与单选按钮的菜单元素的菜单，但他们不aligh得好：单选按钮没有在菜单中正确对齐

<!DOCTYPE HTML> 
<div class="navbar"> 
    <div class="navbar-inner"> 

    <ul class="nav pull-right"> 

    <li> 
<form method="get" action="search" class="navbar-form pull-right"> 
    <input type="text" name="q" class="input-medium search-query" placeholder="Search"> 
    </li>  
    <li id="nav_search_filter" class="dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#"><b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
       <li>Search:</li> 
       <li> 
       <input type="radio" id="search_filter_all" name ="search_filter" value="all" checked="checked"/> 
       <label for="search_filter_all">All</label> 
       </li> 
       <li><input type="radio" id="search_filter_inactive" name ="search_filter" value="inactive" /> <label for="search_filter_inactive">Inactive</label></li> 

       <li><input type="radio" id="search_filter_active" name ="search_filter" value="active" /> <label for="search_filter_active">Active</label></li> 

      </ul> 
      </li> 
</form>   


</ul> 
</div> 
</div>

http://jsfiddle.net/2SmWq/

来源

2013-05-11 Spec

你可以尝试这样的：

label {margin:10px;} 
input[type="radio"] {display:inline-block; vertical-align:top;}

，并在HTML缠绕在输入标签的标签。

这里是一个jsfiddle看看我的意思。

希望这会有所帮助。

来源

2013-05-11 15:29:58

我徘徊为什么它不包含在twitter bootstrap – Spec 2013-05-11 16:49:19

那么，引导程序的按钮就像收音机一样，对吧？你可以使用这些和一个jQuery的行来做你想要的...在这里我添加了一个jsfiddle与该解决方案：http://jsfiddle.net/2SmWq/2/ – 2013-05-11 17:48:21

如果你想要它的确有单选按钮和标签在同一行。试试这个：

<style> 

    label { 
     display:inline-block; 

    } 
</style>

来源

2013-05-11 14:28:29 user2368476

仅解决垂直对齐问题。但他们仍然位于左侧 – Spec 2013-05-11 14:50:11

将收音机改为左侧。 – user2368476 2013-05-11 15:07:52

单选按钮没有在菜单中正确对齐

回答

相关问题