首页 > 程序开发 > web前端 > HTML/CSS >

巧用display:inline-block;(1)------做菜单

2017-03-28

巧用display:inline-block;(1)------做菜单。

巧用display:inline-block;(1)------做菜单

案例:用 a 标签做菜单

优点: 1.不脱离文档流。

2.减少层级嵌套关系。

坑----内联元素代码换行写浏览器会把换行当作空格来处理,会造成内联元素之间有间距

解决的方法:1.给内联元素的父级元素设置font-size:0;

2.给内联元素再次设置font-size.(想要的文字大小).

效果图展示:

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
.footer3Minbox{
text-align:center;
margin:0 auto;
width:700px;
height:30px;
background:#333;
font-size:0;/**1.给内联元素的父级元素设置font-size:0;**/
}
a{
display:inline-block;
padding:0 20px;
border-right:1px solid #fff;
font-size:14px;/**2.给内联元素再次设置font-size.(想要的文字大小)**/
line-height:30px;
color:#fff;
}
.noborder{
border-right:0;
}
</style>
<body>
<div class="footer3Minbox">
<a>你好</a><!--内联元素代码换行写。浏览器会把换行当作空格来处理,会造成内联元素之间有间距-->
<a>我好</a>
<a>他好</a>
<a>大家好</a>
<a>嗨</a>
<a>哈哈哈哈哈哈哈哈哈哈</a>
<a class="noborder">嘿嘿</a>
</div>
</body>
</html>

相关文章
最新文章
热点推荐