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

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

导航条右边有条竖线，一开始老师给出解决方法是用背景图片，就是把竖线给切下来，给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 帅到无穷大 阅读( ...) 评论( ...) 编辑 收藏