2

メニューバーを中央に配置して、メニューバーをテキストに合わせようとしています。ここに私が編集しようとしているウェブサイトがあります: http://www.graffitisumperk.g6.cz/blog/

この方法でメニュー項目を中央に配置できることはすでにわかっています。

.menu {
    text-align:center
}
.menu li {
    display:inline-block;
    float:none;
    margin-left: -5px;
}
.menu li li {
    display:block;
    text-align:left
}

しかし、メニュー バーをメニュー項目の幅に合わせることができないようです。私はそれが445pxの長さであるべきだと計算しましたが、これを変更すると:

#container {
    margin: 0 auto;
    max-width: 960px;

メニューバーだけでなく、ページ全体に影響を与えました。それを修正する方法はありますか？

4

2 に答える 2

2

あなたはそれを非常によく似た方法で行うことができます:)。の影響の 1 つはdisplay: inline-block;、要素がその子を含むように自身のサイズを変更しようとすることです。floatまたはを使用してこれを実現することもできますがposition: absolute、これらはこのレイアウトには実際には適合しません。

.main-nav { text-align: center; }
.menu { display: inline-block; }

メニューを中央に配置したいかもしれないと思ったので、 も追加しましたtext-align。

ヒント: ブラウザーのインスペクターを使用すると (最新のブラウザーはすべてかなり適切なブラウザーを備えています)、どの要素を変更する必要があるかを簡単に判断できます。

于 2013-06-03T23:01:32.687 に答える