如何垂直对齐无序 html 列表中的项目？答案

【问题标题】：How can I vertically align items in an unordered html list?如何垂直对齐无序 html 列表中的项目？
【发布时间】：2010-12-30 13:28:02
【问题描述】：

如何垂直对齐无序列表中的项目以在 IE6 和 7 中工作？

我不能只将 line-height 设置为全高，因为我有 1 行项目和 2 行项目。

我的代码是：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title></title>
        <style type="text/css">
            ul {
                list-style: none;
                border: 1px solid black;
                height: 40px;
            }
            li {
                float: left;
                margin-right: 10px;
                height: 40px;
                width: 46px;
            }
            a {

            }
        </style>
    </head>
    <body>
        <ul>
            <li>
                <a href="/">item1</a>
            </li>
            <li>
                <a href="/">two lines</a>
            </li>
        </ul> 
    </body>
</html>

【问题讨论】：

你的意思是把</div> 放在那里吗？
li 中的
不应该存在。不确定这是否会导致您的问题。

标签： css html-lists center vertical-alignment

【解决方案1】：

您不能将您的项目向左浮动并期望它们垂直排列....

删除

float: left;

来自 LI 风格...

【讨论】：

我需要所有项目的宽度相同。这就是为什么我使用 float 而不是 display:inline 的原因。有两个单词的项目应该占两行。没有浮动是否可以实现这一目标？
是的，您可以...您需要删除所列项目的宽度限制，将其设置为简单的自动或 100%。
使用 width:auto 将使所有项目出现在一行中。我希望所有项目都具有相同的宽度。带有长文本的项目应跨越两行。
你首先需要去掉浮动：left;并替换为 clear: both;或显示：块； ...编辑...我误解了您到底在尝试什么...用“空格”分隔“单词”不能在 CSS 中动态完成，您需要使用 javascript 执行此操作。它将分解由“空格”分隔的单词并将它们分解为单独列出的项目。
我相信这里有点混乱，让我试着澄清一些事情。您正在尝试水平显示列出的项目，其中包含“两个或更多”单词的项目被垂直分解。使用左浮动和宽度是完全可能的，但不推荐，因为一旦你开始平铺这些列出的项目，IE 就不会很好地处理高度和浮动不均匀的列表......你可以 1) 将高度设置为大足以容纳您期望的单词量。 2）使用javascript相应地调整列表。

【解决方案2】：

如果我理解正确，您想使用浮动来收缩包装 li？

如果是这种情况你需要设置

li {clear:left;}

所以 lis 在彼此下方，而不是彼此相邻。如果你想让 li 收缩到内容，你也可以使用 inline-block。

此外，根据此目的，使用表格可能是合适的，具体取决于它的用途。

【讨论】：

【解决方案3】：

对不起，如果这不是一个正确的答案，但它可能有助于澄清问题：

您为什么在列表项中使用浮点数而不是 display: inline？

【讨论】：

【解决方案4】：

行的高度基本相同。所以没有办法在表格中有效地“合并单元格”。您应该将行高设置为“两行”项目的高度，然后使用 vertical-align 属性对齐它们。

【讨论】：

【解决方案5】：

如果我理解正确，您需要一个水平显示的列表，其中每个项目都有设置的宽度和高度，但里面的文本是垂直居中的，并且可能有两行文本的项目。

如果您知道预渲染哪些项目将是两行，则可以应用一个 CSS 类，该类仅在那些具有单行的项目上设置 line-height: 40px;。通常情况并非如此，因此最好的方法是在列表呈现后使用 JS 动态更改行高。

查看这个 jsfiddle：http://jsfiddle.net/UEsAS/2/

本质上，更改您的 CSS 以不在 lis 上设置高度（如果它们是单行的，这将导致它们具有较低的高度，这就是您可以检测要更改哪些的方法）。然后运行以下命令（假设是 jQuery）：

$(function() {
    var maxHeight = 40;
    $('li').each(function(i, el) {
        if ($(el).height() < maxHeight) {
            $(el).css('line-height', maxHeight + 'px');
        }
    });
});

【讨论】：