假设我有一个预先指定宽度的菜单.
我希望每个菜单项都缩小到适合其内容,但ONE除外,然后填充菜单中的剩余空间.
像这样:
Fill | item | item | item
到目前为止,我最接近实现此效果的方法是display:table-cell在每个菜单项的css代码中使用.但问题是除非我为项目定义宽度,否则它们都会扩展为占用表格中相同的宽度.
Fill | item | item | item | item
有没有办法让项目空间缩小以适应项目,并让填充项目只填充div的其余部分？
Tim*_*nen 10
对于那些想要使用表格的人来说,你可以给第一个"td"一个类并将其设置为一个非常大的宽度,然后它会推动并强制其他列尽可能地缩小.它的工作原理是因为表的扩展速度不能超过它们设置的宽度.
例如:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
table td {
border:solid 1px #000;
}
table td.fill {
width:9999em;
text-align:right;
}
table {
width:300px;
border-collapse:collapse;
}
</style>
</head>
<body>
<table>
<tr><td class="fill">Fill</td><td>item</td><td>item</td><td>item</td></tr>
</table>
</body>
</html>
在仅在Firefox和IE中工作的旧示例中,我将"td"宽度设置为0,然后尽可能地缩小列.
您可以通过将td宽度设置为较小的值来将所有列设置为缩小到适合,例如,当您不设置表格宽度时,将其设置为1px,这适用于Chrome,Firefox和IE.
table td {
width:1px;
}
您可能也想设置white-space:nowrap;,否则所有单词都会换行,或者给出td更大的单词width
小智 7
我处理这个问题的一种方法是应用于我希望他们的细胞缩小的width: 1px;每个<TH>地方.然后在每个我希望缩小到内容的单个单元格上,我申请white-space: nowrap;.这可以防止单元实际收缩到1px.
我目前正在财务数据表上使用这种方法,所以我不确定它是否适用于较长段落的文本.
为什么不使用浮动来代替呢？只需颠倒菜单项的顺序即可。
#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>display: inline-block填充宽度的另一种使用方法：
#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>第二种方法的唯一缺点是菜单项实际上包含在第一个菜单项中/已填充。它可以完成填充的技巧width:100%...如果它们是下拉菜单，您可能需要做一些 z-index 工作并折叠边框/设置填充/等等...