<分区>
html - 如何使垂直列表项的高度相同？
我试图使垂直列表中的元素具有相同的高度。像这样？ 
但是，我在使元素的高度相同时遇到了问题。到目前为止，我已经创建了这个:
以下代码片段可以概述我正在努力实现的目标。
html {
font-family: 'Rubik', sans-serif;
}
ul#sectors {
list-style-type: none;
padding-left: 0;
}
ul#sectors>li {
background: #08455C;
color: #fff;
cursor: pointer;
width: 120px;
border-radius: 0;
position: relative;
font-size: 16px !important;
text-transform: capitalize;
text-align: center;
display: inline-block;
margin-right: 10px;
margin-bottom: 10px;
}
ul#sectors>li>p {
margin: 20px 0;
}
.center {
text-align: center;
}<div class="center">
<ul id="sectors">
<li>
<p>All</p>
</li>
<li>
<p>Business <br>Support</p>
</li>
<li>
<p>Creative</p>
</li>
<li>
<p>Cybersecurity</p>
</li>
<li>
<p>Engineering</p>
</li>
<li>
<p>Finance</p>
</li>
<li>
<p>Hospitality</p>
</li>
<li>
<p>Information Technology</p>
</li>
<li>
<p>Misc.</p>
</li>
<li>
<p>Sales</p>
</li>
<li>
<p>Technical</p>
</li>
</ul>
</div>我的问题的代码笔是 https://codepen.io/mrsalami/pen/XxmVRN
最佳答案
使用 display:flex 到 ul 而不是 display:inline-block 到 li
html{
font-family: 'Rubik', sans-serif;
}
ul#sectors{
list-style-type: none;
padding-left:0;
display:flex;
}
ul#sectors>li{
background: #08455C;
color:#fff;
cursor: pointer;
width: 120px;
border-radius: 0;
position: relative;
font-size: 16px !important;
text-transform: capitalize;
text-align:center;
margin-right:10px;
margin-bottom:10px;
}
ul#sectors>li>p{
margin:20px 0;
}
.center {
text-align: center;
}<div class="center">
<ul id="sectors">
<li><p>All</p></li>
<li><p>Business <br>Support</p></li>
<li><p>Creative</p></li>
<li><p>Cybersecurity</p></li>
<li><p>Engineering</p></li>
<li><p>Finance</p></li>
<li><p>Hospitality</p></li>
<li><p>Information Technology</p></li>
<li><p>Misc.</p></li>
<li><p>Sales</p></li>
<li><p>Technical</p></li>
</ul>
</div>关于html - 如何使垂直列表项的高度相同？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52606785/