2

で表される要素を持つ水平メニューを作成しようとしています<span>。メニュー自体 (parent <div>) の幅は固定ですが、要素数は常に異なります。

<span>子の数に関係なく、同じ幅の子を持ちたいと思います。

これまでに行ったこと：float: left;すべてのスパンにスタイルを追加し、そのパーセンテージ幅を指定しました（サーバーはページ生成時にメニュー項目がいくつあり、100％を分割できるかを知っているため、パーセンテージは多かれ少なかれ問題ありませんこの番号で）。これは機能しますが、除算の余り (3 つの要素の場合など) がある場合を除きます。この場合、parent の右側に 1 ピクセルの穴があり<div>、パーセントを切り上げると、最後のメニュー要素は次のようになります。包まれた。また、その場でスタイルを生成するのはあまり好きではありませんが、他に解決策がない場合は問題ありません。

他に何を試すことができますか？

これは非常に一般的な問題のようですが、「同じ幅の子要素」をグーグルで調べても役に立ちませんでした。

4

4 に答える 4

2

固定幅のコンテナを使用している場合は、パーセンテージ幅の子スパンの有効性の一部が失われます。

33％の場合、必要に応じて正しい幅を設定するために、最初と4番目ごとの子スパンにクラスを追加できます。

<div>
<span class="first-in-row">/<span><span></span><span></span><span class="first-in-row"><span></span><span></span>...
</div>

どこ

.first-in-row { width:auto; /* or */ width:XXX px; }
于 2008-09-06T13:42:43.777 に答える
2

テーブルレイアウトが固定されたテーブルを試してみてください。セルの内容に関係なく、列幅を計算する必要があります。

table.ClassName {
    table-layout: fixed
}
于 2008-09-06T13:42:53.230 に答える
0

幅を33.33％に設定するなど、10進値を試しましたか？

CSS構文で指定されているように、widthプロパティ（http://www.w3.org/TR/CSS21/visudet.html#the-width-property）は<percentage>（http：//www.w3 ）として指定できます。 .org / TR / CSS21 / syndata.html＃value-def-percentage）、これは<number>であると述べられています。

数値の定義（http://www.w3.org/TR/CSS21/syndata.html#value-def-number）で述べたように、整数でなければならず、<integer>として記述されるいくつかの値型があります。その他は実数で、<number>と表記されます。パーセンテージは<integer>ではなく<number>として定義されているため、機能する可能性があります。

親のボックスを3で割ることができない場合、ブラウザがこの状況を解決できるかどうかに依存します。1ピクセルまたは2ピクセルのスペースを描画するか、3つのうち1つまたは2つのスパンを残りのスパンよりも広くします。 。

于 2008-09-06T13:58:37.780 に答える
0

Xianの答えを参照すると、：first-child疑似要素もあります。ファーストインロークラスではなく、これがあります。

span:first-child {
    width: auto;
}

明らかに、これは単一行メニューにのみ適用されます。

于 2008-09-06T14:27:35.510 に答える