li 要素が右に浮いている場合は改行が表示されます_html/css

li 要素が右に浮いている場合は改行が表示されます_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:31:17

オリジナル

1247 人が閲覧しました

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/