0

ナビゲーション バー全体を移動するためにいくつかのことを試みましたが、行き詰まっています。ナビゲーション バーのコンテナーは、ナビゲーション バーのサイズに基づいてサイズを取得する必要があります。リンクの量は定期的に変化するため、固定幅を使用することはできません。

親タグで何をするかに関係なく、li の css の float: left はそれを左に保ちます。私は多くのことを試しましたが、最終的に私は私の頭の上にあることを認めることにしました.

CSSは次のとおりです。

#main {
    margin: 0px auto;
}

#nav_bar {
    height: 72px;
    width: auto;
    text-align:center;
}


#main_nav { list-style: none; margin: 0; padding: 0; display: inline;}
#main_nav li { float:left;}
#main_nav li a { text-indent: -999999px; overflow: hidden; display: block; height: 72px; } 

#home { background: url(NavBar/home.jpg); width: 105px; }
#home:hover { background: url(NavBar/home.jpg); 0 0 !important; }

#main_nav:hover li a#home { background-position: -232px center; }


#logo { background: url(NavBar/logo.jpg); width: 116px; }
#logo:hover { background: url(NavBar/logo.jpg); 0 0 !important; }


#main_nav:hover li a#logo { background-position: -232px center; }


#photo { background: url(NavBar/photo.jpg); width: 116px; }
#photo:hover { background: url(NavBar/photo.jpg); 0 0 !important; }


#main_nav:hover li a#photo { background-position: -232px center; }


#animation { background: url(NavBar/animation.jpg); width: 116px; }
#animation:hover { background: url(NavBar/animation.jpg); 0 0 !important; }


#main_nav:hover li a#animation { background-position: -232px center; }


#print { background: url(NavBar/print.jpg); width: 116px; }
#print:hover { background: url(NavBar/print.jpg); 0 0 !important; }


#main_nav:hover li a#print { background-position: -232px center; }


#other { background: url(NavBar/other.jpg); width: 116px; }
#other:hover { background: url(NavBar/other.jpg); 0 0 !important; }


#main_nav:hover li a#other { background-position: -232px center; }

html は次のとおりです。

<body>
<div id="main">
<div id="nav_bar">
<ul id="main_nav">
            <li><a href="" id="home">Home Page</a></li>
            <li><a href="" id="photo">Photos</a></li>
            <li><a href="" id="print">Print</a></li>
            <li><a href="" id="logo">Logos</a></li>
            <li><a href="" id="animations">3D</a></li>
            <li><a href="" id="other">Other</a></li>
        </ul> 
</div>
<div id="footer">Copyright</div>
</div>

</body>
4

1 に答える 1

0

どうぞhttp://jsfiddle.net/5PXEe/1/

これは中心にulあり、新しいメニュー項目でうまく拡張されます

display: inline-block;main_nav で必要でした

于 2012-12-27T02:57:59.540 に答える