同じ幅の子スパン

Question

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

私は子供が<span>と同じ幅で、何個あるのかとは無関係に子供を持っていたいと思います。

これまでに行ったこと：すべてのスパンに対してfloat: left;スタイルを追加し、そのパーセンテージの幅を指定しました（パーセントは、ページの生成時にサーバーが知っているので多少なりともあります）この数で100％を割ることができます）。これは、3つの要素のような除算の余りがある場合を除いて、この例では、親の右側に1ピクセルの穴があります。そして、パーセントを丸めた場合、最後のメニュー要素ラップされています。私はまた、その場でスタイルの生成が本当に好きではありませんが、それ以外の解決策がない場合は問題ありません。

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

これは非常に一般的な問題だと思われますが、「同じ幅の子要素」はグーグルでは役に立ちませんでした。

Answer 1

あなたは固定されたテーブルレイアウトを持つテーブルを試してみてください

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

。セルの内容に関係なく、列の幅を計算する必要があります。

table.ClassName { 
    table-layout: fixed 
} 

Answer 2

固定幅のコンテナがある場合、パーセント幅の子スパンの有効性の一部が失われています。

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

.first-in-row { width:auto; /* or */ width:XXX px; } 

Answer 3

設定幅を33.33％に設定しましたか？

CSSシンタックスで指定されるように、widthプロパティ（http://www.w3.org/TR/CSS21/visudet.html#the-width-property）は<数>であると述べられている<パーセンテージ>（http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage）などを挙げることができます。

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

親のボックスを残して3で割ることができない場合や、1ピクセルまたは2ピクセルのスペースを描画したり、3つのうち1つまたは2つのスパンを作成したりすることはできません残りの部分よりも広い。

Answer 4

西安の答えを参照すると、first-child擬似要素もあります。ファーストインインクラスを持つより、あなたはこれを持っています。

span:first-child { 
    width: auto; 
} 

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