如何使垂直列表项的高度相同？ [复制]答案

【问题标题】：how to make a vertical list items the same height? [duplicate]如何使垂直列表项的高度相同？ [复制]
【发布时间】：2018-10-02 19:09:29
【问题描述】：

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

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

以下代码 sn-p 可以概述我想要实现的目标。

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>

我的问题的codepen是https://codepen.io/mrsalami/pen/XxmVRN

【问题讨论】：

它们是否必须具有相同的宽度？因为使用水平空间的效率非常低，因为您可以看到一些单词没有那么多空间。一种方法是在不定义任何宽度的情况下防止自动换行并添加填充。 check this

标签： html css

【解决方案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>

【讨论】：

【解决方案2】：

使用以下 CSS 更改您的 ul CSS

ul {
display: table-row;
}

还有liCSS

li {
  display: table-cell;
}

【讨论】：