html - css 自动扩展 float 元素(未知宽度)

Question

我的水平导航栏是这样的:

| MENU-ITEM 1 | MENU-ITEM-2 | MENU-ITEM 3 | SEARCH FIELD              |

菜单项具有相同的宽度，但由于网站是 cms 驱动的，因此元素的数量和菜单项列表的宽度将发生变化。

我正在寻找一种 CSS 解决方案，用于自动拉伸(stretch)右侧的搜索字段，以使用导航栏内 100% 的剩余空间。导航栏的总宽度是静态的(大约 950 像素)。

html 是这样的，但也许我仍然需要包装器:

<div id="nav">
   <ul id="nav-items">
      <li class="nav-item">MENU-ITEM 1</li>
      <li class="nav-item">MENU-ITEM 1</li>
      <li class="nav-item">MENU-ITEM 1</li>
   </ul>
   <div id="search-cont">
      <input id="search">
   </div>
</div>

Answer 1

这是一个基本的 fiddle :http://jsfiddle.net/Qg2ag/

思路是:

1. 输入字段的包装必须有 display:block 和 overflow:hidden。
2. 靠近它的菜单必须有 float:left 并且其中的元素必须是 inline 或 inline-block。

因此， float block 吃掉它是溢出 block 的宽度，因此您可以安全地在其中设置width: 100%。而且我已经将 padding-right: 6px 添加到输入的包装器中，因此无需调整它的宽度或使用其他盒子模型。当然，如果您更改输入的样式，此填充的大小可能会有所不同。