我的 DOM 中有以下一组 li。但是它们都只有一个最小宽度,宽度是根据每个 li 内的元素设置的。
演示:链接
父 CSS
#parent{
width:1024px;
height:90px;
background-color:black
}
我想要的是扩展 li 元素的宽度以适应父元素的整个宽度。如何使用 css3 实现这一点。
谢谢你。
一种方法是display: flex;
: http: //jsfiddle.net/kCRc3/18/
另一种是display: table;
http://jsfiddle.net/kCRc3/24/
display: table;
可能看起来更简洁,但是您需要注意一些怪癖,例如单元格内容的对齐方式。
text-align: justify;
在#header 元素上使用。
然后将内容拉伸到 100% 宽度
#header {
text-align: justify;
}
#header li {
display: inline-block;
}
#header:after {
content: '';
display: inline-block;
width: 100%;
}
如果您设置width: 100%
为带有 的元素,默认display: block;
情况下任何li
元素都是这种情况,那么它将扩展到其父元素的大小。
在您的示例中,这将是.header-tile
.
请注意,这width
已经在 CSS1 中引入,不需要任何 CSS2 或 CSS3 规则或设置。
从您的评论中,我猜您希望所有列表项组合起来填充其父项的宽度,而不是其中的每一个(以便在 中没有剩余空间ul
)。
一种方法是将它们的显示行为设置为表格,就像在这个小提琴中一样:http: //jsfiddle.net/SURzu/
如果您不必固定 的宽度ul
,您也可以同时设置ul
和li
标签display: inline-block;
来实现这一点。
您可以使用 cssdisplay: [table, table-row, table-cell]
来扩展容器中的元素。
这是JSFiddle。
CSS:
#parent{
width: 1024px;
height: 90px;
background-color: black;
display: table;
}
#header {
display: table-row;
}
.header-tile {
display: table-cell;
}
要实现它,您需要创建新的类 - 定义剩余宽度即(父宽度 - 所有 li 宽度 = 剩余宽度)并将其添加到任何<li class="header-tile newWidth">
ie
.newWidth{
width:100px; // this could be the remaining width
}