文本对齐：证明添加白色 space

Question

我在一些项目中使用了 text-align: justify;它是 ::after 伪选择器，用于均匀 space 水平导航或页脚或类似内容的每个部分。但是，为了让一切看起来都正确，我还必须对合理内容的父项的高度进行硬编码。在处理媒体查询和诸如此类的事情时，这可能会变得乏味。没有硬编码的高度，在我的样式表中有 ::after 会在父级的底部添加一个空白 space 。我已经使用了元素检查器，无论我是否手动编写它，::after 的高度都是 0，所以我不确定是什么原因造成的。谁能告诉我如何在不指定高度的情况下去掉样式中的它？

* {
margin: 0;
padding: 0;
}

html, body {
    background: blue;
}

nav {
    background: lighten(blue, 20%);
    padding: 10px 30px;
    ul {
        list-style-type: none;
        display: inline-block;
        text-align: justify;
        width: 100%;
        &:after {
            content: '';
            display: inline-block;
            width: 100%;
            height: 0;
        }
        li {
            display: inline-block;
            a {
                font-family: Helvetica, sans-serif;
                font-size: 20px;
                color: darken(white, 10%);
                text-decoration: none;
            }
        }
    }
}

http://codepen.io/hiremarklittle/pen/pJmQJz?editors=110

谢谢大家

Answer 1

inline-block 元素的缺点之一是浏览器会在它们周围添加一些空白。您可以通过将父级的 font-size 设置为 0 来解决这个问题。然后，您需要在任何子元素上设置适当的 font-size，否则它们将从父元素继承 font-size: 0。

nav {
    font-size: 0;
}

更新代码笔：http://codepen.io/sdsanders/pen/xGNmGJ?editors=110

文本对齐：证明添加白色 space

text-align: justify adding white space

css

justify