css自动扩展浮动元素（未知宽度）
我的水平导航栏如下所示：
| 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>
My horizontal navigation bar looks like this:
| MENU-ITEM 1 | MENU-ITEM-2 | MENU-ITEM 3 | SEARCH FIELD |
The menu-items have equal width, but since the website is cms-driven, the count of items and therefore the width of the menu-item-list will change.
I'm looking for a CSS solution for automatically stretching the search-field on the right to use 100% of the remaining space inside the navigation bar. The navigation-bar's total width is static (about 950px).
html is something like this, but maybe I need wrappers anyway:
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
这是一个基本知识的小提琴： http://jsfiddle.net/Qg2ag/
这个想法是：
display:block和overflow:hidden。float:left并且其中的项目必须是inline或inline-block。因此，浮动块吃掉溢出块的宽度，因此您可以安全地在其中设置
width: 100%。我已将padding-right: 6px添加到输入的包装器中，因此无需调整其宽度或使用其他盒模型。当然，如果您更改输入的样式，则此填充的大小可能会有所不同。Here is a fiddle with the basics: http://jsfiddle.net/Qg2ag/
The idea is:
display:blockandoverflow:hidden.float:leftand the items in it must beinlineorinline-block.So, the floated block eats it's width from the block with an overflow, so you can set
width: 100%in it safely. And I've addedpadding-right: 6pxto the input's wrapper so there is no need in ajusting it's width or using other box model. Of course the size of this padding can vary if you'd change the input's style.如果您在
li元素上使用display: inline;和float: left;，也许会有所帮助。这将使他们保持在一条线上。您现在可以设置这些标签的样式。如果您在
li中使用a标签，您可以考虑对这些标签而不是li进行样式化。然后，搜索栏将与这些元素显示在一行中，但宽度仍保持 100%。
看看这个小提琴。
Maybe it helps if you use
display: inline;andfloat: left;on theli-elements.This will keep them in one line. You can style these tags now. If you're using
a-tags inside thelis you may consider styling these instead of thelis.The search-bar will then be displayed in one line with these elements but also remain at a width of 100%.
Check out this fiddle.