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

时间:2013-04-05 21:44:42

标签: css

我正在尝试使用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

2 个答案:

答案 0 :(得分:0)

尝试使用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;
}

答案 1 :(得分:0)

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