导航条右边竖线问题及解决方法、清除浮动方法

导航条右边有条竖线,一开始老师给出解决方法是用背景图片,就是把竖线给切下来,给a添加背景图,然后让背景图right,center等,这样子竖线就和a标签里的文字在同一水平线上。    
期间尝试给a添加右边框,给li添加右边框,都出现竖线和文字不在同一水平线上的问题。
解决办法:
<span style="display:inline-block;font-size:12px(和文字大小相同); line-height:24px(视情况而定)color:#666;margin:0 6px">|<span>
经过这样设置,再给a,li几乎不用设置太多属性,就设置左浮,字体大小颜色即可。

清除浮动问题
如果父元素里面的子元素都是左浮或者右浮,因为浮动元素脱离标准流,不占用空间,所以父元素没有高度,
那么父元素的兄弟元素就会被父元素的子元素给覆盖,成为元素的坍塌。
解决办法:清除浮动
万能清除浮动发
父元素::after{content:"";display:block;visibility:none;clear:both;}(常用)
注意点:IE6及更低版本浏览器不支持:解决办法,给前面的盒子添加“*zoom:1;”

posted @ 2018-08-01 17:06  帅到无穷大  阅读(1298)  评论(0编辑  收藏  举报