你可能不知道的行内元素和块元素最主要的区别

Posted 2020-07-10 故事情结

  今天在练习当中，遇到了一个问题，写一个列表时，

我想实现的效果是这样的

但是实现的效果确是这样的

太丑了！

写的css是这样子的

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

对，有的人可能一眼就看出了问题所在，行内元素不能设置宽度和高度的

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

但是这样的结果就是

宽度和高度正常了，但是li元素立了起来

网上找了好久，解决方案就是

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

就是设置左浮动，

虽然会比较简单，但是新手真的可能会遇到这种问题的