1

How can I vertically align items in an unordered list to work in IE6 and 7?

I can't just set line-height to the full height because I have both 1 row items and 2 row items.

My code is:

<!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>
4

5 回答 5

2

You cannot float your items to the left and expect them to vertically line up....

Remove

float: left;

From the LI style...

于 2009-12-28T18:29:26.560 回答
1

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

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

li {clear:left;}

所以 lis 在彼此下方，而不是彼此相邻。如果您希望 li 收缩包装到内容，您也可以使用 inline-block 。

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

于 2012-12-19T22:56:44.137 回答
0

Sorry if this isn't a proper answer, but it may help clear things up:

Why are you using floats instead of display: inline for your list items?

于 2009-12-28T18:32:58.570 回答
0

The rows essentially be the same height. So there is no way to effectively "merge cells" in table speak. You should set the line height to the height of the "two line" items and then use the vertical-align property to align them.

于 2009-12-28T18:33:15.443 回答
0

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

如果您知道预渲染哪些项目将是两行，则可以应用一个 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');
        }
    });
});​
于 2012-12-19T23:48:52.570 回答