CSS实例教程 伪消除波动

日期:2021-03-14 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

1个多月前总结了《清除波动的全家人》,那时候看了以后没甚么新鮮的物品也就忽视了,今日不经意又翻到那篇文章内容,想起了此外1个的方式(N久前在图书店翻到的),在网络上没看到有人提到过,写出来大伙儿1起探讨下。

HTML:

<ul>
<li>无编码序列表</li>
<li>无编码序列表</li>
<li>无编码序列表</li>
</ul>
<p>段落</p>

CSS:

ul, li{margin:0;padding:0;}
ul{background-color:yellow;}
li{float:left;list-style-type:none;}
p{clear:both;background-color:red;}

Firefox下实际效果:

 

可见,ul的黄色情况并沒有显示信息出来。

关键来了:

在CSS理再加以下编码

ul{float:left;}

实际效果以下:

 

缺陷:

波动算是消除取得成功了,可是宽度沒有像display:block那样撑开,必须特定1个宽度:

ul{width:100%;}
 

总结:

波动带来的1个难题便是消除波动,尽管有许多方式来处理,但最压根的处理方式還是不必乱用波动,例如一些状况下彻底能够用

selector{display:inline;}

selector{display:inline-block;}

来完成。

上一篇:让页脚紧贴网页页面底部的CSS编码 返回下一篇:没有了