html - CSS - 让 child 适合 parent ，并将他们的内容设置为最小宽度

Question

<ul style="width:100%;height:50px;">
    <li>foo</li>
    <li>bar foo</li>
    <li>bar bar bar bar bar barbarbar</li>
</ul>

我希望我的 li 水平对齐，填充 ul 的宽度，将它们的文本设置为最小宽度，并且如果它们的水平方向太大以至于容器溢出(不转到行)。

有什么解决办法吗？

Answer 1

您刚刚添加了一些 CSS，如下所示

ul{background:#dddddd;}

ul li{
   float:left;
   list-style:square inside;
   padding-right:20px;
   line-height:50px;
}

Here is Output.