您的位置：首页 > 其它

display:inline-block配合text-align:justify实现块级元素均匀布局

2017-08-30 17:09 961 查看
今天突然get到一个使用text-align:justify实现块级元素均匀布局。



代码如下：

<html>
<head>
<meta charset="utf-8">
<title>display:inline-block配合text-align:justify实现块级元素均匀布局</title>
<style>
*{margin:0;padding:0;}
#subMenu{width:1200px;margin:0 auto;text-align:justify;font-size:0;}
#subMenu:after {content: "";display: inline-block;position: relative;width: 100%;}
#subMenu li{list-style-type:none;display:inline-block;width:200px;height:40px;line-height:40px;text-align:center;background:#ccc;}
#subMenu li a{display:block;font-size:14px;}
#subMenu li a:hover{background:#eee;color:red;}
</style>
</head>
<body>
<ul id="subMenu">
<li class="dd">
<a href="#">导航1</a>
</li>
<li class="dd">
<a href="#">导航2</a>
</li>
<li class="dd">
<a href="#">导航3</a>
</li>
<li class="dd">
<a href="#">导航4</a>
</li>
</ul>
</body>
</html>


通过给伪元素 :after 设置 inline-block 设置宽度 100% ，配合容器的 text-align: justify 就可以轻松实现多列均匀布局了。再多配合几句 hack 代码，可以实现兼容到 IE6+ ，最重要的是代码不长，很好理解。

那么为什么使用了 :after 伪元素之后就可以实现对齐了呢？

原因在于 justify 只有在存在第二行的情况下，第一行才两端对齐，所以在这里，我们需要制造一个假的第二行，而 :after 伪元素正好再适合不过。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航