ホームページ > 記事 > ウェブフロントエンド > li 要素が右に浮いている場合は改行が表示されます_html/css_WEB-ITnose
li 要素が右に浮いている場合は改行が表示されます_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:31:171292ブラウズ
Li 要素を右にフローティングすると改行が発生します:
一般に、ブロックレベルの要素を 1 行に表示したい場合は、要素をフローティングにできますが、パフォーマンスが期待どおりにならず、改行が発生する場合があります。が発生します。
次のコードを見てください:
rrree
上記のコードでは、右側の li は右浮動小数点を使用していますが、依然として改行現象が発生します。
解決策:
左側の li 要素も同様です。 float を使用すると、コードは次のように変更されます:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">*{ padding:0; margin:0;}#box{ width:250px; list-style:none;}#box li{ width:100px; height:30px; background-color:green;}</style></head><body><ul id="box"> <li></li> <li style="float:right"></li></ul></body></html> 元のアドレスは: http://www.softwhy.com/forum.php?mod=viewthread&tid=9738
詳細については、次を参照してください: http ://www.softwhy.com /divcss/
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。