html - 列表项夹紧

Question

在尝试向我的 header 添加钳制后，我的结果并不是我想要的那样。

我把我用来实现我的结果的代码做了一个 fiddle :https://jsfiddle.net/73kerhsn/

h3
{
  margin: 0;
  font-size: 13px;
}

ul
{
  list-style: none;
  padding: 0;
  margin: 0;
}

li
{
  display: inline-block;
  margin: 2px;
  padding: 0;
}

.acontainer
{
  background-color: yellow;
  width: 500px;
  padding: 15px;
}

.background
{
  background-color: grey;
  width: 196px;
}

.block1
{
  height: 110px;
  width: 195px;
  background-color: red;
}

.clamp
{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

<div class="acontainer">
  <ul>
    <li class="background">
      <div class="block1">

      </div>
      <h3 class="clamp">
        This foo test asdas asdassd saasas dasasa asdasadsd asasddas asdadsg gfhfhg gddfd sddsfsdf
      </h3>
      <div>
        Something
      </div>
      <div>
        Something else
      </div>
    </li>
    <li class="background">
      <div class="block1">

      </div>
      <h3>
        This foo test
      </h3>
      <div>
        Something
      </div>
      <div>
        Something else
      </div>
    </li>
    <li class="background">
      <div class="block1">

      </div>
      <h3>
        This foo test
      </h3>
      <div>
        Something
      </div>
      <div>
        Something else
      </div>
    </li>
  </ul>
</div>

我希望列表项保持相同的高度，即使标题标签变得比其他列表项的标签大(例如，jsfiddle 中的第二个列表项看起来比顶部低第一个列表项。我希望它仍然保持在顶部(填充仍然完好无损))。

有没有人可以帮我解决这个问题？提前致谢。

Answer 1

您可能只想为列表项添加 vertical-align: top。

li
{
  display: inline-block;
  margin: 2px;
  padding: 0;
  vertical-align: top;
}

https://jsfiddle.net/73kerhsn/1/