css - 我有水平显示的州和城市列表，但显示不均匀

Question

我正在尝试水平显示各州明智的城市，但到目前为止我无法均匀显示它们。附上当前显示方式的截图。

下面是我用于显示州和城市的代码。请帮助我理解我哪里出错了。请找到下面提供的截图链接供您引用:

<ul>State1
<li>City1<li>
<li>City2<li>
<li>City3<li>
<li>City4<li>
<li>City5<li>
</ul>
<ul>State2
<li>City1<li>
<li>City2<li>
<li>City3<li>
<li>City4<li>
<li>City5<li>
</ul>
<ul>State3
<li>City1<li>
<li>City2<li>
<li>City3<li>
<li>City4<li>
<li>City5<li>
</ul>
etc....!
CSS:
ul{
width:25%;
float:left;color:#ABCDEF;
}

Answer 1

我会使用 flexbox 而不是 float 。这将使所有列表的高度均匀并正确包装，但您需要在 ul 周围放置一个容器:

HTML

<div class="list-container">
    <ul>
        <li>...</li>
    </ul>
</div>

CSS

.list-container {
    display: flex;
    flex-wrap: wrap;
}

.list-container ul {
    width: 25%;
}

查看完整的代码笔示例:http://codepen.io/StefanBobrowski/pen/KWjNoG