Question

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

演示：link

父css

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

我想要的是扩展li元素的宽度以适应父元素的整个宽度。我怎样才能使用css3实现这一目标。

谢谢。

Answer 1

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

然后拉伸内容以占据100％宽度

<强> FIDDLE

#header {
    text-align: justify;
}

#header li {
    display: inline-block;

}

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

Answer 2

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

display: table;可能看起来更简洁，但有几个怪癖，例如你需要注意细胞内容的对齐。

Answer 3

您可以使用css display: [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 4

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

在您的示例中，.header-tile。

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

Answer 5

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

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

Answer 6

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

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

如果您不必修改ul的宽度，则还可以将ul和li标记设置为display: inline-block;以实现此目的。

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

6 个答案: