html css垂直列表对齐顶部

Posted 2023-03-05

【中文标题】html css垂直列表对齐顶部

【英文标题】：html css Vertical list aligning top

【发布时间】：2014-08-28 05:41:59

【问题描述】：

我正在尝试创建一个有 4 列的容器，顶部有一个图像，下面有一些文本。

但它不对齐顶部，而是底部

这是 li 的样式

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

这是小提琴：（底部的图像应该在顶部）

http://jsfiddle.net/G6Jnh/

我认为表格可能更容易，但它应该只用于显示数据而不是他们所说的布局......

【参考方案1】：

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

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

Demo

【参考方案2】：

我在您的 li 样式中添加了 float: left，它似乎有效。

【参考方案3】：

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

#carousel-navigation ul 
    display: table;


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

Updated Demo

【讨论】：

这很有趣，这样做和使用表格有什么区别？它很实用，但这是一个好习惯吗？如果你删除它，显示内联块也会覆盖表格单元格，你不需要垂直对齐，但必须从 ul 中删除填充

重要的是元素的性质（html 代码的语义）。 CSS 只会以不同于默认值的方式显示它们；这只是风格而不是它们的内在本质。所以是的，这不是不好的做法，而且很有用（正如你所说，使用 HTML 表格进行布局是不好的做法，当然你必须将它们用于数据）

table-layout: fixed 对于display: table 可能有用也可能没用。它在浏览器中触发完全不同的算法（适应内容 vs 适应作者想要的）