4

サイト構造の最初の 2 つのレベルにすばやくアクセスできるように、ページの下部に配置するサイト マップ タイプのメニューを作成しています。ただし、ラップされたときにきちんと表示されるようにリストをフォーマットするのに問題があります。

ここに私が到達しようとしているものの写真があります: 望ましいフッター メニュー レイアウト

ただし、最終的には次のようになります。 リストの形式が正しくありません

問題を示すために簡略化されたコードと、JSFiddleへのリンクを次に示します。

<html lang="en">
<head>
    <style type="text/css">
        #footer-menu { 
            float:left; 
            background:#454545; 
            color:#FFFFFF; 
            width:850px;
            margin:50px auto 0 auto; 
            padding:10px 10px 2px 10px; 
            display:inline;
        }
        #footer-menu ul { 
            padding:0; 
            list-style-type:none; 
            left:auto; 
            overflow: auto; 
        }
        #footer-menu li { 
            margin:0 20px 5px 0; 
            padding-left:6px; 
            list-style-type:none; 
            float:left; 
            display:inline; 
            background:none; 
            position:relative; 
            font-family:Arial; 
            font-weight:bold; 
            border-left:1px solid #FFFFFF;
        }
        #footer-menu ul li ul {
            margin:5px 0 5px 0;
        }
        #footer-menu ul ul li {
            float:none; 
            padding:0; 
            margin:0 0 2px 0; 
            font-weight:normal; 
            display:block; 
            width:auto; 
            border:0;
        }
        #footer-menu a { 
            text-decoration: none; 
            color: white;
        }
        #footer-menu a:hover {
            text-decoration: underline; 
            color: white;
        }
    </style>
</head>
<body>
    <div id="footer-menu">
        <ul>
            <li><a href="#">List 1 Title is quite looooong</a>
                <ul>
                    <li><a href="#">List 1 Item 1</a></li>
                    <li><a href="#">List 1 Item 2</a></li>
                    <li><a href="#">List 1 Item 3</a></li>
                    <li><a href="#">List 1 Item 4</a></li>
                    <li><a href="#">List 1 Item 5</a></li>
                    <li><a href="#">List 1 Item 6</a></li>
                    <li><a href="#">List 1 Item 7</a></li>
                    <li><a href="#">List 1 Item 8</a></li>
                </ul>
            </li>
            <li><a href="#">List 2 Short title</a>
                <ul>
                    <li><a href="#">List 2 Item 1</a></li>
                    <li><a href="#">List 2 Item 2</a></li>
                    <li><a href="#">List 2 Item 3</a></li>
                    <li><a href="#">List 2 Item 4</a></li>
                </ul>
            </li>
            <li><a href="#">List 3 Title of average length</a>
                <ul>
                    <li><a href="#">List 3 Item 1</a></li>
                    <li><a href="#">List 3 Item 2</a></li>
                    <li><a href="#">List 3 Item 3</a></li>
                </ul>
            </li>
            <li><a href="#">List 4 with no sub items</a></li>
            <li><a href="#">List 5 Should wrap under list 1</a> 
                <ul>
                    <li><a href="#">List 2 Item 1</a></li>
                    <li><a href="#">List 2 Item 2</a></li>
                    <li><a href="#">List 2 Item 3</a></li>
                    <li><a href="#">List 2 Item 4</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

リスト内のアイテムは、HTML を生成するスクリプトを介してサイト マップ XML ファイルから取得されます。ページがサイトに追加されるとリストが変更されるため、高さを手動で調整する必要のないソリューションを探しています。リストが正しくフォーマットされるようにします。

CSS を使用してリストの行全体の高さを修正し、ラップされたリストが新しい行の左側から始まるようにすることは可能ですか?

4

3 に答える 3

2

このjsFiddleを確認してください

Firefox で完璧に動作します。

かわった

#footer-menu li {
    margin:0 20px 5px 0;
    padding-left:6px;
    list-style-type:none;
    /*float:left;
      display:inline;
    */
    /*Added this */ 
    display:inline-table;

    background:none;
    position:relative;
    font-family:Arial;
    font-weight:bold;
    border-left:1px solid #FFFFFF;
}
于 2012-04-24T11:15:45.770 に答える
1

これに使用できる:nth-childかもしれませんが、それはあなたを助けるかもしれません。次のように書きます。

#footer-menu > ul > li:nth-child(5){
    clear:both;
}

これをチェックしてくださいhttp://jsfiddle.net/PV8Bq/1/

しかし、n番目の子はIEでは機能しません

于 2012-04-24T11:12:40.077 に答える
0

このjsFiddleを確認してください

また、コードを少しきれいにし、マージンを減らして、最初の 4 つのブロックが一列に収まるようにしました。

于 2012-04-24T11:25:17.043 に答える