21

li水平メニューを形成する要素を要素の幅全体に均等に分散させたいですul。私は通常float、li要素を左側に配置し、マージンを追加します。ulしかし、要素の左端から右端まで伸びるように適切な間隔を設定するにはどうすればよいですか？

これは、に分散されていないメニューのjsfiddleの例ですul。

間隔は、それぞれの間で同じである必要がありますli。ただし、li要素の長さが異なる場合があります。

4

5 に答える 5

45

さらに別のアプローチ。これは、メニューをページ全体に均等に広げようとするときに使用するものです。特定の条件（管理者としてログインしている場合にのみ表示される管理ページなど）に応じて変更される動的メニューがあると便利です。

CSS：

nav div ul {
display: table;
width: 100%;
list-style: none;
}
nav div ul li {
display: table-cell;
text-align: center;
}
nav div ul li a {
display: block;
}

私はちょっと怠け者で、これを現在のプロジェクトからコピーしただけなので、コードに合わせて調整する必要がありますが、水平メニューを作成するための私の好ましい方法です

編集：これを追加することで、スパンがより良く見えるようにすることができます：

CSS：

nav div ul li:first-child {
    text-align: left;
}
nav div ul li:last-child {
    text-align: right;
}

繰り返しますが、テストされておらず、入力されただけです。

于 2012-11-14T19:09:08.020 に答える
2

li要素の幅を設定して、スペースを埋めるように強制する必要があります。

ul {
    width: 100%;
}
li {
    float: left;
    width: 33%;
}

（フィドルデモ）

リストにさらにアイテムを追加する場合は、パーセンテージの幅を調整する必要があります。たとえば、4つのアイテムの場合、幅は25％になります。

于 2012-11-12T10:15:28.090 に答える
1

私はあなたに2つの答えがあります。

floatモデルに固執したい場合：

ul要素にオーバーフロープロパティを設定する必要があります（このプロパティがないと、ul（または浮動要素を含む要素）に高さが指定されません（これは予想される動作です。注意してください：http ：//www.quirksmode.org/css/clearing .htmlul ）であるため、デフォルトで高さ0になります。これにより、 /liと本文に異なる背景色を設定すると、背景がul表示されないように見えます）。

ul {
    text-align: center;
    width: 300px;
    overflow: auto;
}

要素のli幅を設定する必要があります。そうしないと、フロート要素として、要素の幅が含まれているものに設定されます。以下のピクセルを使用しましたが、パーセンテージ値も使用できます。

li {
    float: left;
    margin: 5px 0 5px 0;
    width: 100px;
    text-align: center;
}

display:inline-blockli要素のプロパティを使用します（古いブラウザーのサポートが優先されない場合）。</li>IE 7はこれをサポートしていないため、幅広いクロスブラウザーのサポートが必要な場合は役に立ちませんが、必要な効果が得られます。ただし、タグとタグの間のスペースは必ず削除してください<li>。そうしないと、全体の幅にカウントされます。要素間のスペースとして表示されます。

この方法の利点の1つは、含まれている要素にulパーセンテージ幅を使用する場合、コンテナの幅を知ったり設定したりする必要がないliことです。それでも、既存のtext-alignプロパティを使用して無料で中央揃えを取得できます。これにより、レイアウトの応答性が非常に高くなります。

これが、あなたが要求していると思うように機能するマークアップとCSSです。

マークアップ：

<ul>
<li>banana</li><li>orange</li><li>apple</li>
</ul>

CSS：

li {
    display:inline-block;
    margin:5px 0 5px 0;
    width:33.33%;
}
ul {
    text-align: center;
}
  • liマークアップを複数行に保持したい場合は、CSSの要素の左右の余白をいじる必要があります。
  • 要素を追加する場合liは、一致するようにパーセンテージの幅を変更する必要があります（たとえば、liマークアップに4つの要素がある場合、CSSを変更してそれぞれの幅を25％にする必要があります）。
于 2012-11-14T19:02:43.687 に答える
1

HTML：

 <ul>
    <li>1</li>
    <li>2 <br>4</li>
    <li>3</li>
</ul>

Css：

ul {
    list-style: none;
    font-size: 0;
    text-align: justify;
}

ul:after {
    content: '';
    display: inline-block;
    width: 100%;
}

li {
    font-size: 100px;
    display: inline-block;
}

codepen

于 2019-05-18T13:52:33.973 に答える
0

私はあなたの質問をはっきりと理解していないので、あなたがこれを望むかもしれないと思いました：

li {
    border:solid 1px red;
    clear:both;
    display:block;
    float: left;
    margin: 5px;
    width:100%;
}
ul {
    text-align: center;
    width:300px;
}
于 2012-11-12T10:08:37.430 に答える