假设我有一个预先指定宽度的菜单。
我希望每个菜单项缩小到其内容，除了一个，然后填充菜单中的剩余空间。
喜欢这个：
Fill | item | item | item
到目前为止，我最接近实现这一效果的是在每个菜单项的css代码中使用display：table-cell。但是问题是，除非我定义一个项目的宽度，它们都会在表中占用相同的宽度。
Fill | item | item | item | item
有什么办法让物品空间收缩以适应物品，并且填充物品只是填满其余的div？
解决方法
为什么不使用浮点？只是颠倒你的菜单项的顺序。
#menubar {
background-color: lime;
width: 100%;
}
.menuitem {
float: right;
padding-right: 10px;
padding-left: 10px;
}
/* Clear float */
#menubar:after {
content: ' ';
display: block;
clear: right;
}
<div id="menubar"> <div class="menuitem">item</div> <div class="menuitem">item</div> <div class="menuitem">item</div> <div class="menuitem">item</div> <div class="menuitem">fill</div> </div>
使用显示的替代方式：填充宽度的内联块：
#menubar {
width: 100%;
text-align: right;
}
.menuitem {
display: inline-block;
background-color: aqua;
}
.filled {
width: 100%;
background-color: gray;
}
<div id="menubar">
<div class="menuitem filled">fill
<div class="menuitem">item</div>
<div class="menuitem">item</div>
<div class="menuitem">item</div>
</div>
</div>
第二种方法唯一的失败是菜单项实际上包含在第一个菜单项/填充中。它是填充宽度的诀窍：100％…如果它们是下拉菜单，你可能想要做一些z-index工作和崩溃边框/设置padding / etc …
