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

发布于 2024-08-16 02:03:51 字数 988 浏览 4 评论 0原文

如何垂直对齐无序列表中的项目以在 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>

原文

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

烟沫凡尘 2024-08-23 02:03:52

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

如果您知道预渲染哪些项目将是两行，则可以仅在那些具有单行的项目上应用设置 line-height: 40px; 的 CSS 类。通常情况并非如此，因此最好的方法是在列表渲染后使用 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');
        }
    });
});

If I understand correctly, you want a horizontally displayed list where each item has a set width and height, but the text inside is vertically centred, and there may be items that have two lines of text.

If you know pre-rendering which items will be two lines you can apply the a CSS class that sets the line-height: 40px; only on those items with a single line. This is not normally the case thought, so the best way to go is to use JS to dinamically alter the line-height after the list has been rendered.

See this jsfiddle: http://jsfiddle.net/UEsAS/2/

In essence, alter your CSS to not set a height on the lis (this will cause them to be have a lower height if they are one-line, which is how you can detect which ones to alter). Then run the following (assuming jQuery):

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

回复收藏 0 原文