html css垂直列表对齐顶部

Question

我正在尝试创建一个包含4列的容器，顶部是一个图像，下方有一些文字。

但它并没有与顶部对齐，而是在底部

这是李的样式

#carousel-navigation li {
    list-style: none;
    display: inline-block;
    width: 23%;
    background-color: blue;
}

这是小提琴:(底部的图像应该在顶部而不是）

http://jsfiddle.net/G6Jnh/

我认为桌子可能更容易，但它只应用于显示数据，而不是用于说明......

Answer 1

您需要添加vertical-align属性，如下所示：

#carousel-navigation li {
    list-style: none;
    display: inline-block;
    width: 23%;
    background-color: blue;
    vertical-align:top; /* add this */
}

Demo

Answer 2

将ul显示为表格，将li显示为表格单元格，然后根据需要使用vertical-align

#carousel-navigation ul {
    display: table;
}

#carousel-navigation li {
    display: table-cell;
    vertical-align: top;
}

Updated Demo

Answer 3

我为你的样式添加了一个float: left，它似乎有效。