意外と知られていないインライン要素とブロック要素の主な違い_html/css_WEB-ITnose

今日、リストを書いているときに問題が発生しました。

達成したかった効果は次のとおりです

しかし、効果は確かにこのようなものです

それはあまりにも醜いです！

書かれたCSSはこんな感じです

li{   display;inline;   width:20px;   height:20px;   list-style:none;   }    

はい、一見して問題がわかる人もいるかもしれません

li{   width:20px;   height:20px;   list-style:none;   }    

しかし、結果は

widthとThe heightです。は正常ですが、li 要素が立ち上がってしまいます

ネットで長い間探しましたが、解決策は

li{   float:left;   width:20px;   height:20px;   list-style:none;   }    

左浮動小数点を設定することです

比較的簡単ですが、初心者はこの問題に遭遇する可能性があります