css - 高さを設定せずにフローティング LI で UL の下部に境界線を付ける

Question

私がやっていることを示すために jsFiddle をセットアップします。

http://jsfiddle.net/UfzCS/

基本的に、私が UL に設定した (完全に横切る必要がある) 境界線は、LI が左に浮いているため、LI の上 (下ではなく) に表示されます。これに対する回避策はありますか? 高さを設定できることはわかっていますが、高さが動的に変化するようにテキストを可変サイズにすることがあります。

Answer 1

LI はフローティングであるため、UL はそれらをラップする場所を知りません。

これを修正する簡単な方法は、UL を作成するfloat: leftか、UL に追加するoverflow: hiddenことです。