0

それぞれにチェックボックスがたくさんある2つのスパンを表示するUIに問題があります。HTMLは次のようになります。

<strong>Areas Impacted</strong>
<div class="arealist">
  <span class="group"><label><input type="checkbox" />Select All</label></span>
  <span class="areas">
    <label><input type="checkbox" />Item 1</label>
    <label><input type="checkbox" />Item 2</label>
    <label><input type="checkbox" />Item 3</label>
    <label><input type="checkbox" />Item 4</label>
    <label><input type="checkbox" />Item 5</label>
    <label><input type="checkbox" />Item 6</label>
    <label><input type="checkbox" />Item 7</label>
  </span>
</div>

そして私は次のCSSを持っています：

div.arealist { display: block; clear: both; margin-top: 40px; }
div.arealist>span { display: inline; padding: 25px; }
div.arealist>span label { display: inline; }
div.arealist>span.group { width: 75px; border: 1px solid #d0d0d0; }
div.arealist>span.areas { width: 300px; border: 1px solid #d0d0d0; }

それはそのように見えます：

ここに画像の説明を入力してください

これには2つの問題があります。まず、右側のチェックボックスが境界線とともに左側のボックスに流れ込みます。[すべて選択]テキストは独自のスパンにある必要があり、アイテムのリストはすべて右側のボックスに表示されます。2番目の問題は、項目4のチェックボックスが2行に分割されることです。タグを単一のユニットとして扱い、<label>複数の行にまたがらないようにしたい。

フィドルサンプル

私は何が間違っているのですか？

4

1 に答える 1

2

私の知る限り、両方の問題は、コンテンツをインライン要素に配置することから発生します。ブラウザが小さくなりすぎて両方のコンテンツを<span>幅全体に保持できない場合、2番目のスパンのコンテンツは、次の行に折り返されます。これは、それらの要素内のすべての要素<span>が1本の直線上にある場合と同じです。この効果は、スパン要素の周囲の境界線で視覚化できます。

2番目の問題も同じです。ブラウザは各ラベルアイテムを単なるテキスト行として扱っているため、ブラウザウィンドウが十分に大きくない場合は、あるラベルの開始位置と別のラベルの開始位置に関係なく、次の行に折り返されます。始まります。

両方をインラインブロックに変更するだけで、問題ありません。

div.arealist>span { display: inline-block; padding: 25px; }
div.arealist>span label { display: inline-block; }

（もちろん、<span>インラインブロック要素は実際に指定した幅の設定に従っているため、それぞれの内部の要素は2行に折り返されているので、少しいじる必要があります。

于 2013-01-25T00:04:45.737 に答える