0

事業会社のホームページを作っているのですが、ページ上部にメニューバーがあります。現在、このメニューバーには 4 つの li タグ (コードの下) が含まれており、これらの li はページの左側に固定されています。横に均等に分布するようにしたいです。ヘルプ！

<div id="wrapper-menu">
<div id="menu">
    <ul>
        <li><a href="">home</a></li>
     <li><a href="">about us</a></li>
     <li><a href="">news</a></li>
     <li><a href="">contact us</a></li>
     <li><a href="">links</a></li>
    </ul>
 </div>
   </div>
4

2 に答える 2

0

li インライン ブロック アイテムを作成する必要があります。また、ul に text-align を適用することを忘れないでください。

li {
    display: inline-block;
}
ul {
    text-align: center;
}

ここに例：

http://jsfiddle.net/evmDv/

于 2013-04-29T08:52:57.693 に答える
0

あなたの問題は、それらを垂直ではなく水平にしたいということです（あなたはそれらがすべて左側にあると言います）。これが問題でない場合、この回答は当てはまりません。

おそらく、次の行に沿って css に何かが必要です。

li {display: inline-block;}

インラインブロックが何をするのかを正確に調べたいと思うかもしれませんが、一言で言えば、ブロックが画面の全幅ではなく、十分な幅であり、ブロックがインライン要素のように機能することを意味します。つまり、各ブロックで新しい行を開始しません。 .

もちろん、見栄えを良くするためにさらにスタイリングする必要がありますが、これでうまくいくはずです。

jsfiddleの例については、http://jsfiddle.net/NqgZ4/ を参照してください。

それらを広げるためのコメントへのフォローアップとして、最も簡単な方法はそれらに幅を適用することです。

li 
{
    display: inline-block;
    width: 19%;
}

幅がピクセルを超える可能性のある丸めの問題を回避するために、20% ではなく 19% を使用していることに注意してください (たとえば、使用可能な幅が 999 ピクセルの場合、20% ではそれぞれが 200 ピクセルになり、合計が大きくなりすぎます)。 ）。

動的な数のメニュー項目がある場合、それは少しトリッキーであり、変数の数で動作する純粋な CSS メソッドがあるかもしれませんが、(幅を動的に設定することによって) それらを均等化するためのスクリプトについて少し考え始めます。アイテム。

更新されたフィドル: http://jsfiddle.net/NqgZ4/1/

于 2013-04-29T08:49:50.657 に答える