Question

我的水平导航栏如下所示：


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

菜单项的宽度相等，但由于网站是cms驱动的，因此项目数量以及菜单项目列表的宽度将会改变。

我正在寻找一种CSS解决方案，用于自动拉伸右侧的搜索字段，以便在导航栏中使用100％的剩余空间。导航栏的总宽度是静态的（大约950px）。

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

以下是基础知识的小提琴：http://jsfiddle.net/Qg2ag/

这个想法是：

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

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

Answer 2

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

搜索栏随后将显示在包含这些元素的一行中，但仍保持100％的宽度。

查看this fiddle。

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

2 个答案: