css - 如何根据父宽度扩展子元素的宽度

Question

我的 DOM 中有以下一组 li。但是它们都只有一个最小宽度，宽度是根据每个 li 内的元素设置的。

演示：链接

父 CSS

#parent{
    width:1024px;
    height:90px;
    background-color:black
}

我想要的是扩展 li 元素的宽度以适应父元素的整个宽度。如何使用 css3 实现这一点。

谢谢你。

Answer 1

一种方法是display: flex;： http: //jsfiddle.net/kCRc3/18/
另一种是display: table; http://jsfiddle.net/kCRc3/24/

display: table;可能看起来更简洁，但是您需要注意一些怪癖，例如单元格内容的对齐方式。

Answer 2

text-align: justify;在#header 元素上使用。

然后将内容拉伸到 100% 宽度

小提琴

#header {
    text-align: justify;
}

#header li {
    display: inline-block;

}

#header:after {
    content: '';
    display: inline-block;
    width: 100%;
}

Answer 3

如果您设置width: 100%为带有 的元素，默认display: block;情况下任何li元素都是这种情况，那么它将扩展到其父元素的大小。

在您的示例中，这将是.header-tile.

请注意，这width已经在 CSS1 中引入，不需要任何 CSS2 或 CSS3 规则或设置。

Answer 4

从您的评论中，我猜您希望所有列表项组合起来填充其父项的宽度，而不是其中的每一个（以便在 中没有剩余空间ul）。

一种方法是将它们的显示行为设置为表格，就像在这个小提琴中一样：http: //jsfiddle.net/SURzu/

如果您不必固定 的宽度ul，您也可以同时设置ul和li标签display: inline-block;来实现这一点。

Answer 5

您可以使用 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;
}

Answer 6

要实现它，您需要创建新的类 - 定义剩余宽度即（父宽度 - 所有 li 宽度 = 剩余宽度）并将其添加到任何<li class="header-tile newWidth">ie

.newWidth{
  width:100px; // this could be the remaining width
}