Css 底部边线与外层边border对齐


美工为了页面好看,有时候会做一些比较难实现的css样式,下边的样式不算很难,但是对于初学者而言,就有些吃力了,如何实现外层border-bottom,与内层的border-bottom对齐,是这个需求的关键。

image.png

初始的时候,是这样的。

image.png

我们假定html代码是这样的结构

<ul class="clearfix">
   <li class="active" >个性鼓励</li>
   <li>快速鼓励</li>
   <li>历史记录</li>
</ul>

首先需要将li左浮动,并且外层ul已经清理浮动,在外层ul上加一个样式border-bottom:2px solid #EEEEEE;

此时给ul下的active样式也增加一个颜色 border-bottom:2px solid #FF7A32;用于进行区分这个是选中状态的;

这时就变成了第二个图片的样子,没对齐;

此时,我们在给active加一个样式,margin-bottom:-10px;

你就可以发现,此时,边线已经重叠在一起了。

当然,看你的li的padding和line-height 决定margin-bottom是设置负多少合适;我的需求调整到-10px即可;

欢迎转载,请保留出处,感谢阅读,没有明白,或者有其他问题的同学,请留言;

上一篇 下一篇

评论



最新评论

daliangzao_qq_com: 1112 查看原文 12月03日 10:57
PHP笔记: ypengchao@126.com 查看原文 06月26日 11:38
PHP笔记: 用数据库 查看原文 06月26日 11:37
网站/shl设计: 如果关闭浏览器了,session就没有了呀。再打开浏览器不就可以重新登陆了。 查看原文 05月28日 15:26
网站/shl设计: 站长怎么联系你有给问题请教。 查看原文 05月28日 15:25

分享

扫一扫,快速分享到微信

赞助商