未对齐的CSS溢出UL水平卷轴

Question

如果您查看这个小提琴，您应该会看到问题http://jsfiddle.net/qo9czztj/

但最终，图片和标题都包含在div中，如果标题比一行文字长，它会降低图像，使其变得不均匀。

我尝试了所有不同的定位和显示技术，但我没有得到完美的线条。

提前感谢您的帮助

马特

编码示例：

<div class="below">
  <ul>
    <li>
      <div>
        <img src="f8a9086b222786c5845f60fdc22c6c2e.jpg" />
        <p>hello hello hello hello hello hello hello hello hello</p>
      </div>
    </li>
    <li>
      <div>
        <img src="f8a9086b222786c5845f60fdc22c6c2e.jpg" />
        <p>hello hello</p>
      </div>
    </li>
  </ul>
</div>

Answer 1

更改ul div {display: inline-block; text-align: center; }

到ul li div {display: inline-block; text-align: center; vertical-align:top}