css自动扩展浮动元素（未知宽度）答案

【问题标题】：css automatically expand floating element (unknown widths)css自动扩展浮动元素（未知宽度）
【发布时间】：2011-12-09 11:00:04
【问题描述】：

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


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

菜单项具有相同的宽度，但由于网站是 cms 驱动的，因此项目的数量以及菜单项列表的宽度会发生变化。

我正在寻找一种 CSS 解决方案，用于自动拉伸右侧的搜索字段以使用导航栏内 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>

【问题讨论】：

标签： html css width css-float

【解决方案1】：

这里是一些基础知识：http://jsfiddle.net/Qg2ag/

这个想法是：

输入字段的包装器必须具有display:block 和overflow:hidden。
它附近的菜单必须有float:left，其中的项目必须是inline 或inline-block。

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

【讨论】：

效果很好，但是“显示：块”对于小提琴中的 div 是多余的，我更喜欢“显示：内联”而不是“显示：内联块”，因为它有更好的支持（afaik )。纠正我，如果您认为它们是必需的，例如由于更好的跨浏览器兼容性
如果你不需要inline-blocks，那么你就不需要它们，但是浏览器对它们的支持几乎是完美的（在IE中你可以使用display:inline;zoom:1 hack来启用@ 987654331@ 的行为。关于多余的display:block — 我添加它是为了防弹：如果div 突然变成span，最好有一些额外的样式。我练习实际的@987654335 @s 可以变化。
为什么不将input 设置为display:block 而不是为input 添加一个换行块元素div？
@hguser，你自己试试吧。你会发现输入不能有宽度：自动，所以你不能把它拉伸到剩余的空间，它总是固定的宽度。这就是包装器使用自动宽度的地方。

【解决方案2】：

如果您在 li 元素上使用 display: inline; 和 float: left; 可能会有所帮助。这将使它们保持在一条线上。您现在可以设置这些标签的样式。如果您在lis 中使用a-tags，您可以考虑设置这些样式而不是lis。

搜索栏将与这些元素显示在一行中，但宽度仍保持为 100%。

查看this fiddle。

【讨论】：

将它们保持在一行不是问题，而是如何让输入字段自动调整大小以填充剩余空间的问题。当您调整结果窗口的大小时，搜索字段的宽度不会在您的小提琴中改变。