Question

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

我不能将行高设置为全高，因为我有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>

Answer 1

你不能将你的物品浮动到左边并期望它们垂直对齐....

删除

float: left;

从LI风格......

Answer 2

如果我理解正确你想用浮子来收缩包裹李？

如果是这种情况，则需要设置

li {clear:left;}

所以lis在彼此之下，而不是彼此相邻。如果希望li缩小包含内容，也可以使用inline-block。

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

Answer 3

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

为什么您的列表项使用浮点数代替display: inline？

Answer 4

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

Answer 5

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

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

请参阅此jsfiddle：http://jsfiddle.net/UEsAS/2/

本质上，改变你的CSS不要在li上设置一个高度（如果它们是一行的话，这会导致它们的高度较低，这就是你可以检测哪些改变的高度）。然后运行以下（假设jQuery）：

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

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

5 个答案: