web-dev-qa-db-ja.com

順序付けられていないリストでHTMLリストアイテムを均等に配布する方法

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

ここに 配布されていないメニューのjsfiddleの例 がul全体にあります。

間隔は各liで同じでなければなりません。ただし、li要素の長さは異なる場合があります。

csscss3css-floathtml-listsspacing
20
at.

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

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;
}

繰り返しますが、未テストで、入力しただけです。

43
FireCrakcer37

二つの答えがあります。

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

ul要素には、overflowプロパティを設定する必要があります（このプロパティがない場合、ul（またはフロート要素を含む要素）には高さが与えられません（これは予想される動作です。注意してください： http：//www.quirksmode .org/css/clearing.html ）したがって、デフォルトで高さ0になります。これにより、ul/liとbodyに異なる背景色を設定すると、ulの背景は変わりません。表示されるようです）。

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

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

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

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

このメソッドの利点の1つは、含まれるul要素でパーセンテージ幅を使用する場合、コンテナーliの幅を知る必要も設定する必要もないということです。 。これにより、レイアウトの応答性が向上します。

マークアップと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;
}
  • 複数の行にマークアップを保持する場合は、CSSのli要素の左右の余白をいじる必要があります。
  • li要素を追加する場合は、パーセンテージ幅を一致するように変更する必要があります（たとえば、マークアップに4つのli要素がある場合、CSSを変更して各CSSの幅を25％にする必要があります）。
1
Matt Wagner

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

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

（ 中間デモ ）

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

1
whostolemyhat

私はあなたの質問がはっきりと分からないので、あなたはこれが欲しいかもしれないと思いました：

li {
    border:solid 1px red;
    clear:both;
    display:block;
    float: left;
    margin: 5px;
    width:100%;
}
ul {
    text-align: center;
    width:300px;
}
0
Wilf

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

0
olly