Apple官网研究之使用Justify布局导航

在实现文字两端对齐的时候，可以对文字所在的元素使用如下属性来达到需求

text-align: justify;

我们已经知道，使用浮动布局是一个次等选择，因为浮动布局会导致页面全局渲染2次而降低渲染效率，因此陆续出现了许多浮动布局的替换方案。比如新旧两种弹性盒模型，以及接下来我们需要分析到的内联块元素的两端对齐。

Apple官网也是使用了内联块元素的两端对齐。

<div class="wrap">
    <div class="item">Javascript</div>
    <div class="item">Css</div>
    <div class="item">Angular</div>
    <div class="item">Gulp</div>
    <div class="item">Bootstrap</div>
</div>

.wrap {
    max-width: 600px;
    background-color: orange;
    color: #fff;
    margin: 20px auto;
    text-align: justify;
    height: 44px;
    line-height: 44px;
}

.item {
    display: inline-block;
}

.wrap::after {
    display: inline-block;
    content: '';
    width: 100%;
    line-height: 0;
    font-size: 0;
}

想要使用justify达到预期效果，必须注意到以下一点

内联元素最后一排不会两端居中，而会左对齐。

因此，如果导航元素只有一排的话，text-align: justify并不会生效，所以我们在wrap子元素的最后添加一个after伪类，并将他的宽度设置为100%，那么最后一排就是这个after伪类了，效果就得意正常实现。

猜你喜欢