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

今天突然get到一个使用text-align:justify实现块级元素均匀布局。

display:inline-block配合text-align:justify实现块级元素均匀布局_第1张图片

代码如下:

<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="#">导航1a>
            li>
            <li class="dd">
                <a href="#">导航2a>
            li>
            <li class="dd">
                <a href="#">导航3a>
            li>
            <li class="dd">
                <a href="#">导航4a>
            li>
        ul>
    body>
html>

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

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

原因在于 justify 只有在存在第二行的情况下,第一行才两端对齐,所以在这里,我们需要制造一个假的第二行,而 :after 伪元素正好再适合不过。

你可能感兴趣的:(web前端,CSS,html,CSS3)