1

広い幅と狭い幅で適切に中央に配置されている UL がありますが、中域で壊れています。幅が広い場合はすべてがうまく収まり、ブラウザーが狭い場合はすべてがうまく重なりますが、幅が800pxなどの中間幅を使用すると、メニューは次の行に折り返されます。 2 列目のリンクを中央に配置できます。これは、上がどのように見えるか (赤い丸)、下が何をしたいか (緑の丸) のスクリーンショットです。

ここに画像の説明を入力

別のスレッドを見ると、彼の例のリンクで私のメニューが現在どのように機能しているかがわかります。彼の例でブラウザを縮小すると、メニューが折り返され、2 行目が左揃えになっていることがわかります。

上の図のように、2 行目を 1 行目の中央に配置したいと思います。これは可能ですか？

HTMLは次のとおりです。

<div id="navContainer" 
    <ul>
        <li class="menu_home"><a href="/">Home</a></li>
        <li class="menu_gallery squished"><a href="/galleryIntro.php">Gallery of Properties</a></li>
        <li class="menu_service"><a href="/service.php">Service Options</a></li>
        <li class="menu_contact"><a href="/contact.php">Contact Us</a></li>
        <li class="menu_test"><a href="/panos/laakona2/">Testing HotSpots</a></li>
    </ul>
</div>

いずれにせよ、私が望むように機能していないので、CSS は必要ないと思います (そして、約 38 の異なる CSS ファイルに広がっており、すべてが左に浮かんでいますが、考えられる場合は、ここに css を追加できます)役立つかもしれませんが、とにかくすべてを破棄します...)

4

1 に答える 1

1

追加

text-align:center;

Tinkerbin の例では .nav ul に。

また：

   #navContainer ul {
         text-align:center;
    }

あなた自身のcssに

于 2013-05-18T13:27:32.177 に答える