how to make a vertical list items the same height?

Question

I am trying to make the items in a vertical list the same height. Like this?

However, I am having problems making the items the same height. So far I have created this:

following code snippet can give an overview of what I am trying to achieve.

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>

The codepen to my problem is https://codepen.io/mrsalami/pen/XxmVRN

**Do they have to have the same width ?** because that is highly inefficient of using horizontal space as you can see some of the words don't that much space. one way is to prevent word wrap and add padding without defining any width. [check this](https://jsfiddle.net/2b59cLfn/1/) — Zohir Salak, Oct 02 '18 at 11:05

score 0 · Answer 1 · answered Oct 02 '18 at 10:47

Use display:flex to ul instead display:inline-block to 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>

score 0 · Answer 2 · answered Oct 02 '18 at 10:51

0

Change your ul CSS with following CSS

ul {
display: table-row;
}

And li CSS

li {
  display: table-cell;
}

answered Oct 02 '18 at 10:51

Abdul Basit

1,232
1
8
18

how to make a vertical list items the same height?

2 Answers2