Question

我正在尝试使用horiztonal li元素创建这些卡片效果。

但是，它们内部的文本数量似乎正在抛弃它们（有些高于其他文本）。例如，第3个框的文本多于其他2个，因此它的位置高于其他框。

li {
  position: relative;
  display: inline-block;
  width: 282px;
  height: 368px;
  background: url("../img/comedians/comedian-card.png");
  padding: 20px;
  margin: 10px;
}

如何将它们对齐而不管内部的文字？

http://f.cl.ly/items/2e2I2Z0x0g3M2D1o2F0t/stackoverflow.png

Answer 1

尝试使用vertical-align，例如：vertical-align: middle。我会尝试在一秒钟内提出一个演示。

以下是演示：http://jsfiddle.net/wMb8t/1/

CSS

li{
    display: inline-block;
    width: 120px;
    border: 1px solid black;
    margin: 5px;
    vertical-align: top;
}

Answer 2

由于您的阻止为inline-block，因此您应添加vertical-align:top;

<li>错位，取决于文字</li>

2 个答案:

CSS