如何在html没有空白时平均分配li元素？

Question

我读这篇文章Almost complete guide to flexbox (without flexbox)，我已经尝试使用“空间之间”，我有这样的代码：

ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    text-align: justify; 
 
} 
 
ul:after { 
 
    content: ""; 
 
    display:inline-block; 
 
    width:100%; 
 
} 
 
ul li { 
 
    list-style: none; 
 
    display: inline-block; 
 
}

<ul><li>Foo</li><li>Bar</li><li>Baz</li></ul> 
 
<ul> 
 
<li>Foo</li> 
 
<li>Bar</li> 
 
<li>Baz</li> 
 
</ul>

在第一 <ul>

<li>的不正确分布因为<li>在<li>标签末尾没有空格，所以当html是一行没有空格时，是否可以使用text-align: justify进行分配？没有flexbox可能吗？

我试着添加ul li:after但没有奏效。

Answer 1

在这种情况下text-align: justify是不合适的，因为首先你需要允许列表项的宽度，那么text-align将工作。您可以使用％的宽度和text-align来对齐文本。

ul { 
 
    width:100%; 
 
    height: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
ul li { 
 
    float:left; 
 
    line-height:37px; 
 
    height:100%; 
 
    list-style-type:none; 
 
    margin:0; 
 
    overflow:hidden; 
 
    width: 33.33%; 
 
    background: red; 
 

 
} 
 
ul li span{ 
 
background: blue; 
 
display: block; 
 
width: 100%; 
 
}

<ul><li>Foo</li><li>Bar</li><li>Baz</li></ul> 
 
<ul> 
 
<li><span>Foo</span></li> 
 
<li><span>Bar</span></li> 
 
<li><span>Baz</span></li> 
 
</ul>