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而不是浮动。这将使所有列表均匀高度并正确包装，但您需要一个围绕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

Answer 2

column-count css可能是一个逃脱

<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}
</style>
</head>
<body>

<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-count property.</p>

<div class="newspaper">
<ul>
<li>ABJHDGD</li>
<li>ABJHDGD</li>
<li>ABJHDGD</li>
<li>ABJHDGD</li>
<li>ABJHDGD</li>
<li>ABJHDGD</li>
</ul>
<ul>
<li>BJHDGD</li>
<li>BJHDGD</li>
<li>BJHDGD</li>
<li>BJHDGD</li>
<li>BJHDGD</li>
<li>BJHDGD</li>
<li>BJHDGD</li>
<li>BJHDGD</li>
<li>BJHDGD</li>
</ul>
<ul>
<li>JHDGD</li>
<li>JHDGD</li>
<li>JHDGD</li>
<li>JHDGD</li>
<li>JHDGD</li>
<li>JHDGD</li>
</ul>
</div>

</body>
</html>

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

2 个答案: