两端对齐和列表布局-CFANZ编程社区

00 、一抹前言 and 两端对齐

今天在看张鑫旭的博客的时候，突然灵光乍现，想到之前工作中一个没解决的问题，文字的两端对齐，产品要求 UI，UI 要求我右面的文字要和前面的文字一样对齐，不能参差不齐，结果就是来回调了一天半，没成功最后就长成下面这个样子。

反正当时也没想到怎么弄，而且其他项目也紧就没来的急处理，现在是知道了其实就是文字的两端对齐，text-align:justify;。加上之后的效果如下：

完美对齐，灰常的开森?。

01、列表布局

这种列表布局最为常见了，里面涉及到的一个问题就是总宽是：1190px，但是根据盒子计算宽为：1120px，最后一个盒子会掉下来，所以常用的套路就是强行扩宽外加浮动布局。

关于扩宽

第一种办法强行给盒子增加一个宽度

需要注意的是强行增加盒子的宽度的时候，盒子宽度值必须的大于等于四个盒子的宽但小于等于五个盒子的宽。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表布局</title>
    <style>
        *{margin: 0; padding: 0;}
        section{
            margin: 10px auto;
            background-color: #ecf6b6;
            width: 1190px;
            overflow: hidden;
        }
        ul{
            list-style: none;
            /*强行增加一个宽度*/
            overflow: hidden;
            width: 1200px;
        }
        li{
            float: left;
            width: 290px;
            height: 300px;
            background-color: #64b5f6;
            margin-right: 10px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <section>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </section>
</body>
</html>

这种方法不好在于强行增加盒子的宽度，盒子的流体特性就没了。

margin为负扩展盒子宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表布局</title>
    <style>
        *{margin: 0; padding: 0;}
        section{
            margin: 10px auto;
            background-color: #ecf6b6;
            width: 1190px;
            overflow: hidden;
        }
        ul{
            list-style: none;
            /*margin负值扩张宽度*/
            overflow: hidden;
            margin-right: -10px;
        }
        li{
            float: left;
            width: 290px;
            height: 300px;
            background-color: #64b5f6;
            margin-right: 10px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <section>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </section>
</body>
</html>

当 margin 为正值的时候，盒子本身是外扩的。
margin 负值理论
a.当给一个元素设置margin 负值（top/left）,该元素将在该方向上产生位移。——动自己
b.当给一个元素设置margin负值（bottom/right）,这个元素并不会像你所预想的产生位移，而是将任何紧随其后的元素“拉”过来，覆盖在自己的上边。
c.负边距在普通文档流中的作用和效果(margin-bottom负值，减少高度)。其中margin-bottom还会引发折叠现象谁大听谁的。——动别人。
d.左（margin-left）和右（margin-right)的负边距对元素宽度的影响（盒子在没有设置宽度的情况下（width:auto;也看成未设宽度），margin-right:-100px;盒子content增加宽度100px, ）。

给盒子扩张宽度更加推荐第二种使用 margin 为负值来增加盒子得宽度，这样的唯一好处是，盒子有个widht:auto; ，没丧失盒子的流体特性。

关于盒子并排显示

解决了盒子宽度问题，下面就是解决盒子并排显示。

使用左浮动
非常的常用，但是有一个缺点：如果盒子不是一样的高，容易造成犬牙交错层次不齐的现象。为了避免这样的现象，我们一般会给盒子设定一个固定的高。例如新浪微博的话题贡献排行榜：采用的浮动，为了避免犬牙交错的现象，给盒子固定高，但是因为用户名的长度不一，所以采用了单行溢出隐藏。于是，不得已，裁掉了用户名信息。

其实浮动还有一个最大的缺点：高度塌陷的问题，也就是常提到的“清除浮动”。

基于display:inline-block的列表布局

现在我们改写下列表布局由浮动布局改为行内块：主需要把float:left;改为：display: inline-block;，这时观察布局，发现：

解决办法很简单只要把 HTML 骨架由：

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

改为：

<ul>
    <li></li><li></li><li></li><li></li><li></li><li></li>
</ul>

这个方法是不可取的，毕竟严重影响 HTML 骨架。所以解决办法主要有以下两种：

ul 设置font-size:0;?负值可以去除所有浏览器的换行符间隙
如果是单纯的图片还行，如果有图片肯定是不行的。
ul 设置 letter-spacing: -5px;?负值可以去除所有浏览器的换行符间隙
推荐使用。

既然是两端对齐，我们肯定的使用：text-align: justify; 来对齐文本，但此时最后一行是对不齐的，原因：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表布局</title>
    <style>
        *{margin: 0; padding: 0;}
        section{
            margin: 10px auto;
            background-color: #ecf6b6;
            width: 1190px;
            overflow: hidden;
        }
        ul{
            list-style: none;
            /*强行增加一个宽度*/
            overflow: hidden;
            width: 1200px;
            letter-spacing: -5px;
            text-align: justify;
        }
        li{
            display: inline-block;
            width: 290px;
            height: 300px;
            background-color: #64b5f6;
            margin-right: 10px;
            margin-bottom: 20px;
        }
        .justify_fix{
            display: inline-block;
            width: 100%;
            height: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <section>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <span class="justify_fix"></span>
        </ul>
    </section>
</body>
</html>

为了保持盒子的流体特性，我们可以不强制设定宽度，采用 CSS3 伪类来去掉每一行最后一个元素的 margin。改动的代码主要如下：

ul{
    list-style: none;
    overflow: hidden;
    /*为了流体把宽度限制条件删除*/
    /*width: 1200px;*/
    letter-spacing: -5px;
    text-align: justify;
}
li:nth-child(4n){
    margin-right: 0;
}
li:last-of-type{
    margin-right: 0;
}

推荐这种方法，因为 ul ，这个盒子是自适应的。当然要实现最后一行两端对齐还有flex布局和grid布局。其中使用 flex 布局的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表布局</title>
    <style>
        *{margin: 0; padding: 0;}
        section{
            margin: 10px auto;
            background-color: #ecf6b6;
            width: 1190px;
            overflow: hidden;
        }
        ul{
            list-style: none;
            overflow: hidden;
            letter-spacing: -5px;
            text-align: justify;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        li{
            display: inline-block;
            flex-shrink: 0;
            width: 290px;
            height: 300px;
            background-color: #64b5f6;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <section>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </section>
</body>
</html>