两端对齐和列表布局

2020年3月6日23点16分

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; ,没丧失盒子的流体特性。

关于盒子并排显示

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

  • 使用左浮动
    非常的常用,但是有一个缺点:如果盒子不是一样的高,容易造成犬牙交错层次不齐的现象。为了避免这样的现象,我们一般会给盒子设定一个固定的高。例如新浪微博的话题贡献排行榜:采用的浮动,为了避免犬牙交错的现象,给盒子固定高,但是因为用户名的长度不一,所以采用了单行溢出隐藏。于是,不得已,裁掉了用户名信息。
https://s.weibo.com/weibo?q=%23BIGBANG%E4%B8%8EYG%E7%BB%AD%E7%BA%A6%23

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

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

inline-block属性的元素适用于inline box模型,所以,当其中的列表元素高度不一时,是不会有错位的。如果微博使用此种方法需要注意的是用户名过长,大量留白问题。

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

为什么没有成功

为什么没有成功?
因为 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; 来对齐文本,但此时最后一行是对不齐的,原因:

列表(或文字)要两端对齐的前提就是内容必须超过一行,所以,要解决最后一行元素无法两端对齐的文字其实很简单,就是在列表(或文字段)的最后创建一个高度为0的宽度100%的透明的inline-block的标签层就可以了。所以我们手动加一个 span 标签。

<!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>

思考:🤔现在问题又来了,我们想要在 flex 布局的情况下,让最后一行左对齐?
首先最后一行需要左对齐的布局更适合使用CSS grid布局实现,

推荐阅读更多精彩内容