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

アイテムを左に浮かせて、縦に並べることを期待することはできません....

削除する

float: left;

LI スタイルから...

于 2009-12-28T18:29:26.560 に答える
1

私が正しく理解していれば、フロートを使用してliをラップしたいですか？

その場合は、設定する必要があります

li {clear:left;}

したがって、リスは互いに隣り合っているのではなく、互いに下にあります。li をコンテンツにシュリンク ラップする場合は、インライン ブロックを使用することもできます。

また、目的によっては、テーブルを使用することが適切な場合もあります。

于 2012-12-19T22:56:44.137 に答える
0

正しく理解できれば、各アイテムの幅と高さが設定されている水平方向に表示されるリストが必要ですが、内部のテキストは垂直方向の中央に配置され、2行のテキストがあるアイテムが存在する場合があります。

どのアイテムが2行になるかを事前にレンダリングすることがわかっている場合はline-height: 40px;、1行でそれらのアイテムにのみ設定するCSSクラスを適用できます。これは通常は当てはまらないので、リストがレンダリングされた後、JSを使用して行の高さを動的に変更するのが最善の方法です。

このjsfiddleを参照してください：http：//jsfiddle.net/UEsAS/2/

基本的に、CSSを変更してsに高さを設定しないようにしますli（これにより、CSSが1行の場合、高さが低くなります。これにより、変更するCSSを検出できます）。次に、以下を実行します（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 に答える
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

行は基本的に同じ高さです。そのため、テーブルスピーキングで効果的に「セルをマージ」する方法はありません。行の高さを「2 行」アイテムの高さに設定してから、vertical-align プロパティを使用してそれらを揃える必要があります。

于 2009-12-28T18:33:15.443 に答える