如何获得列表项始终相同的高度？

Question

我有一个菜单，其中包含不同大小的不同列表项。菜单中的项目是动态调整大小的，因此如果我调整视口大小，它们会缩小。

如何让它们始终保持相同的高度？取最大列表项的高度。

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>

Answer 1

您可以查看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>

您还可以使用旧版浏览器的display:table选项：

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>