Question

我有一个列表显示为使用CSS的单行菜单。菜单浮动到右侧，以输入框结尾。问题是输入框显示在比菜单更低的行上。我怎么能避免这个？

我的CSS如下：

<style type="text/css">
 #nav {
   margin:0; 
   padding:0; 
   list-style:none;
 }  

 #nav li {
   float:left; 
   display:block; 
   background-color: #6F7D94;
   position:relative;
   z-index:500; 
   margin:0 1px;
 }

 #nav li a {
   display:block; 
   padding:5px 10px 5px 10px; 
   font-weight:200;  
   text-decoration:none; 
   text-align:center; 
   color:#fff;
 }

 .menu-container {
   float:right;
 }
</style>

我的菜单如下：

<div class="menu-container">
  <ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Browse</a></li>
    <li><a href="#">Tags</a></li>
  </ul>
  <input name="q" id="id_q" /> 
  <input type="submit" value="Search">
</div>

Answer 1

这是小提琴。

http://jsfiddle.net/Be4xW/

Answer 2

将列表的输入部分添加到另一对LI。

中

Answer 3

只需将white-space: nowrap;添加到.menu-container即可。 http://jsfiddle.net/vvR7B/

Answer 4

添加宽度 menu-container { 浮动：权利; 宽度：700px; }

向右浮动时没有包装输入框

4 个答案: