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的宽度，将文本设置为min-width，如果它们水平太大而不能让容器溢出（不要去行）。

任何解决方案？

Answer 1

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

ul{background:#dddddd;}

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

Here is Output.

Answer 2

Demo

您可以使用flexbox

CSS

ul {
    display: flex;
    line-height: 50px;
    border: 1px solid red;
    flex-wrap: nowrap;
    flex-direction: row;
    /*justify-content: center; if you want to justify flex elements*/
}
li {
    min-width: 100px;
    white-space: nowrap;    
}
body {
    margin:0;
    padding: 0;
}

编辑： min-width内容为li New Demo

有关flexbox

的更多信息

CSS - 让孩子适合父母，并将他们的内容作为最小宽度

2 个答案: