how to get list items always same height?

Question

I have a menu with different list items of varying sizes. The items in the menu are dynamically sized, so if i resize viewport they scale down.

How can i make them to be always the same height? Taking the height of the biggest list item.

body{
background-color: darkslategrey;
  color: white;
}
ul {
  height: 100px;
  list-style: none;
}
span div {
  width: 5rem;
}
li {
  display: inline-block;
  text-align: center;
  border: 1px solid cyan;
/*   transform: skewX(30deg); */
  margin: 0;
  padding: 8px 18px;
 
}
li span {
  display:inline-block;
/*   transform: skewX(-30deg); */
}
p {
  margin: 0;
}
h1 {
  margin: 0;
}
.c {
  font-size: 4rem;
}

<ul>
  <li><p>babboon</p></li>
  <li>
    <span>
      <div><h1>A</h1></div>
        <p>anton</p>
      </span>     
  </li>
  <li>
    <span>
      <div><h1>B</h1></div>
        <p>Bert</p>
      </span>     
  </li>
  <li>
    <span>
      <div><h1 class="c">C</h1></div>
        <p>conner</p>
      </span>     
  </li>
</ul>

I highly recommend using flexbox, as suggested by @gcyrillus — ndugger, Jul 23 '17 at 20:29
@GCyrillus changed the dupe, this type of question has been posted so many times here — dippas, Jul 23 '17 at 20:46
@GCyrillus sometimes the search isn't so good, had to use the google search :) — dippas, Jul 23 '17 at 20:48

G-Cyrillus · Accepted Answer · 2017-07-23T20:35:43.203

You can give a look at https://css-tricks.com/snippets/css/a-guide-to-flexbox/

body{
background-color: darkslategrey;
  color: white;
}
ul {
  list-style: none;
  display:flex;
}
span div {
  width: 5rem;
}
li {
  /*display: inline-block;*/
  /* flex can be imbricated and use to position children */
  display:flex;
  align-items:center;
  justify-content:center;
  /* end flex example ... follow the tutorial ;) */
  text-align: center;
  border: 1px solid cyan;
/*   transform: skewX(30deg); */
  margin: 1px;
  padding: 8px 18px;
 
}
li span {
  display:inline-block;
/*   transform: skewX(-30deg); */
}
p {
  margin: 0;
}
h1 {
  margin: 0;
}
.c {
  font-size: 4rem;
}

<ul>
  <li><p>babboon</p></li>
  <li>
    <span>
      <div><h1>A</h1></div>
        <p>anton</p>
      </span>     
  </li>
  <li>
    <span>
      <div><h1>B</h1></div>
        <p>Bert</p>
      </span>     
  </li>
  <li>
    <span>
      <div><h1 class="c">C</h1></div>
        <p>conner</p>
      </span>     
  </li>
</ul>

You also have the display:table option for older browsers :

body{
background-color: darkslategrey;
  color: white;
}
ul {
  list-style: none;
  display:table;
  border-spacing:1px;
}
span div {
  width: 5rem;
}
li {
  /*display: inline-block;*/
  display:table-cell;
  vertical-align:middle;
  text-align: center;
  border: 1px solid cyan;
/*   transform: skewX(30deg); */
 /* margin: 1px; border-spacing will do the job */
  padding: 8px 18px;
 
}
li span {
  display:inline-block;
/*   transform: skewX(-30deg); */
}
p {
  margin: 0;
}
h1 {
  margin: 0;
}
.c {
  font-size: 4rem;
}

<ul>
  <li><p>babboon</p></li>
  <li>
    <span>
      <div><h1>A</h1></div>
        <p>anton</p>
      </span>     
  </li>
  <li>
    <span>
      <div><h1>B</h1></div>
        <p>Bert</p>
      </span>     
  </li>
  <li>
    <span>
      <div><h1 class="c">C</h1></div>
        <p>conner</p>
      </span>     
  </li>
</ul>

Upvoted, but you can remove the inline-block on the li – ndugger Jul 23 '17 at 20:31 — ndugger, Jul 23 '17 at 20:31

how to get list items always same height?

1 Answers1