如何使垂直列表项的高度相同？

Question

我正在尝试使垂直列表中的项目具有相同的高度。像这样？

但是，我在使物品具有相同高度时遇到问题。到目前为止，我已经创建了这个：

下面的代码片段可以概述我正在尝试实现的目标。

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

Answer 1

使用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>

Answer 2

使用以下CSS更改您的ul CSS

ul {
display: table-row;
}

和li CSS

li {
  display: table-cell;
}