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

最新推荐文章于 2024-03-28 15:35:59 发布

#麻辣小龙虾#

最新推荐文章于 2024-03-28 15:35:59 发布

阅读量1.4k

点赞数

分类专栏： CSS CSS3 html web前端文章标签：布局

本文链接：https://blog.csdn.net/CodingNoob/article/details/77719147

版权

web前端同时被 3 个专栏收录

99 篇文章 2 订阅

订阅专栏

CSS3

20 篇文章 0 订阅

订阅专栏

CSS

15 篇文章 0 订阅

订阅专栏

今天突然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 伪元素正好再适合不过。

#麻辣小龙虾#

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
display:inline-block配合text-align:justify实现块级元素均匀布局

今天突然get到一个使用text-align:justify实现块级元素均匀布局。代码如下：<html> <head> <meta charset="utf-8"> <title>display:inline-block配合text-align:justify实现块级元素均匀布局</title> <style> *{ma
复制链接

扫一扫