<li>を横に並べて表示する時の回り込み解除
-
0 名前： ながらみ ： 2005/08/19 18:04
- お世話になります。
-----
<ul>
<li>リスト１</li>
<li>リスト２</li>
（以下続く）
</ul>
<div>ここから違うセクション</div>
-----
というリストをCSSで
-----
ul { width: 30em; list-style: none; margin: 1em 0 }
li { width: 10em; height: 1.5em; float:left }
-----
などとして、横に並べて表示する手法がありますよね。
floatによる回り込みを解除する為、</ul>の後に続く要素
上のHTMLで言うと<div>に
clear:bothプロパティを指定していたのですが
回り込みは解除されるものの、<ul></ul>と<div>との間隔が
適切でない（狭い）ように見えます。
上の例ですと、上下に1emのマージンがとられてほしいのですが
上部は適切なマージンがあるものの、下部は0.5em程度しかマージンがとられません。
パディングでも試しましたが、結果は同様です。
ulは本来、内包する要素のサイズに合わせてサイズを変えるものではない
ということから生じる現象でしょうから
ulにheightを指定すれは解決します。
しかし、今回のケースでは必ずしもリスト行は１行とは限らず、
折り返しになる場合もあるため、heightの値を定めることはできません。
<li>リスト２</li>の後に<br style="clear:both">を置くことで、
指定どおりの表示（上下に1emのマージン）とはなりますが
<ul>直下には確か、<li>しか置けないのでしたよね。
CSSを読み込まない環境下で見た時、余計な空行が出来てしまうのも
少々気になります。
折り返しになるリストを内包しても、次にくる要素との間隔が
適切に空けられる方法は、他にありますでしょうか。
-
1 名前： Pid ： 2005/08/19 18:04
- 浮動ボックスは通常の流し込みから切り離され，現在行の左または右に専用のボックスを形成する（後続要素はこのボックスを避けて配置される）とともに，「本来配置されるはずだった場所」にはあたかも何も存在しなかったように扱われます。試しに border を引いてみれば，li が浮動ボックスとして通常の流し込みから切り離された結果，「中身を失って」ぺしゃんこになってしまった ul のボックスがよく見えます。
「ぺしゃんこの」ul と div の間に li 浮動ボックスが次々と配置されるため，ボックス配置としては li 浮動ボックスの次に div ボックスが来ます。つまり，すでに ul と div の間隔は 1em 以上空いており，
> 下部は0.5em程度しかマージンがとられません。
と仰っているのは ul と div の間隔ではなく，(li の padding) + (li の margin) + (div の padding) 分の余白なのです。
> 折り返しになるリストを内包しても、次にくる要素との間隔が適切に空けられる方法
こういう場合，私は float ではなく { display: inline; } の方が好きです。テキストを途中で折り返されたくなければ { white-space: nowrap; } を合わせて指定します。ただし，この方法では各項目の幅を合わせるのが難しくなりますが。
-
2 名前： ながらみ ： 2005/08/19 18:04
- 分かりやすく有為なご説明を有難うございます。
>> 下部は0.5em程度しかマージンがとられません。
>
> と仰っているのは ul と div の間隔ではなく，(li の padding) + (li の margin) + (div の padding) 分の余白なのです。
そうなのですよね。ご説明頂いたおかげで、腑に落ちました。
私も、本来であればご提示の{ display: inline }が至適と思うのですが
幅を揃えたいというのがあり、floatを用いました。
リストの最後に、<li>***</li>などの適当な項目を加え、
この<li>をclass="fix"などとして
li.fix { display: block; clear: both; height: 0.5em; width: 1px; visibility: hidden }
と定義付ける…という方法をとってみましたが、
見栄えは整うもののちょっと無理矢理な方法ですね。
li.fixを{ content: "あ"; display: block; clear: both; height: 0.5em; width: 1px; visibility: hidden }
として回り込み解除する方法に出会ったので、試してみたのですが
何故か変化がありませんでした。
試しにvisibility: hiddenを外してみたところ、clearはされてはいるものの
次のdivの領域と、重なってしまっているようです（Mozilla系、Safari）。
方法としては前述の適当な項目を加える方法よりスマートにも思うので
もう少し調べ、試行錯誤してみようと思います。
宜しければまた、ご意見などお聞かせ頂けるとうれしいです。
-
3 名前： Pid ： 2005/08/19 18:04
- > li.fixを{ content: "あ"; display: block; clear: both; height: 0.5em; width: 1px; visibility: hidden } として回り込み解除する方法
というのは，ul:after { content: "あ"; display: block; clear: left; visibility: hidden; height: 1em; } のことでしょうか。これは確かに便利ですね (^^)。ただ，WinIE は未だ :after と content に対応していないので，WinIE 対応を考えるなら
> リストの最後に、<li>***</li>などの適当な項目を加え
以外に方法が無いように思います。
----------
妥協案ですが，ul 側ではなく，div 側の padding で調節するのが無難かもしれません。
ちなみに，『リストの最後に、<li>***</li>などの適当な項目を加え』と似たような方法ですが，私は hr 要素をよく使います（CSS 非対応のブラウザで区切り線は効果的ですし，CSS 対応ブラウザでは非表示にしておけば良い）。以下のように hr 要素で clear すれば，（ul の margin は無理ですが）div の margin-top なら効くようになります。
<ul>...</ul>
<hr title="セクション区切り" />
<div>...</div>
hr { margin: 0; padding: 0; clear: left; visibility: hidden; }
----------
ちなみに，
> 幅を揃えたい
ということであれば，ul { display: table-row; } li { display: table-cell; } という手もあります。ul 要素の幅をもとに，全 li 要素を自動的に等幅にしてくれます。ただ，これも WinIE は非対応ですが。
