Question

我有一些项目，我使用过text-align：justify;并且它在伪选择器之后均匀地分隔水平导航或页脚或类似物的每个部分。然而，为了让一切看起来正确，我还必须硬编码合理内容的父级的高度。处理媒体查询等等时，这可能会变得乏味。如果没有硬编码高度，在我的样式表中使用:: after会在父级底部添加一个空格。我使用了元素检查器，无论我是否手动编写，:: 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;
}

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

text-align：justify添加空格

1 个答案: