自适应宽度圆角导航如何实现

最新推荐文章于 2019-01-27 08:16:46 发布

weixin_30776273

最新推荐文章于 2019-01-27 08:16:46 发布

阅读量124

点赞数

原文链接：http://www.cnblogs.com/xiaoleidiv/p/7503699.html

版权

让子元素的背景图片右对齐，这样就可以覆盖父元素的背景，而padding-left是为了让父元素露出按钮左侧部分不致于被子元素的背景覆盖。

优点：自适应宽度变化；各浏览器显示效果一致；

缺点：

由于使用子元素的背景图覆盖父元素的，所以不能使用背景透明的图片来实现，否则按钮右侧圆角部分会使得父元素的背景图片露出，大街网使用的是白色背景，因此该按钮如果在非白色背景的场景使用会有白边：
如果有多个不同高度的按钮，就要制作多张图片，或者使用图片拼接拼成一张，不便维护和拓展；
引进无语义化的html标签；

<!DOCTYPE html>

<head>

<title>Document</title>

*{margin: 0; padding: 0}

.bg{height: 50px;}

.leftBg{

height: 45px;

line-height: 45px;

color: #fff;

background: url(left.png) no-repeat left top;

padding-left: 34px;

float: left;