Question

我有一个带有单选按钮作为菜单元素的菜单的导航栏，但它们并不合适：

<!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/

Answer 1

您可以尝试这样的事情：

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

并将标签包裹在html中的输入标签周围。

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

希望这有帮助。

Answer 2

如果您想要它，那么单选按钮和标签在同一行。试试这个：

<style>

    label {
        display:inline-block;

    }
</style>

单选按钮在菜单中无法正确对齐

2 个答案: