Question

在尝试将标题添加到标题后，我的结果并没有按照我想要的方式进行。

我制作了一个代码，用于实现我的结果：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

你可以将它应用到你的css来设置列表项的样式：

li{
    display: inline-table;
}

这将使您的li项目从相同的高度开始，现在您可以根据需要设置高度，它不会妨碍您的下一行内容。如果您不设置固定高度，则只有框的开头保持不变。

Answer 2

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

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

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

列出项目夹紧

2 个答案: