text-align：justify添加空格

I've had a few projects where I've used text-align: justify; and it's ::after pseudo selector to evenly space each part of a horizontal nav or a footer or anything similar. However, to get everything looking right, I've had to hard-code the height of the parent of the justified content as well. That can get tedious when dealing with media queries and whatnot. Without a hard-coded height, having ::after in my stylesheet adds a blank space at the bottom of the parent. I've used the element inspector and whether I manually write it or not, the ::after has a 0 height, so I'm not sure what's causing it. Can anybody tell me how to get rid of it in the style without specifying a height?

我有一些项目,我使用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

Thanks guys

1 个解决方案

#1

One of the downsides of inline-block elements is that the browser adds some whitespace around them. You can get around this by setting the font-size of the parent to 0. You then need to set the appropriate font-size on any children elements, otherwise they will inherit the font-size: 0 from the parent.

内联块元素的缺点之一是浏览器在它们周围添加了一些空格。您可以通过将父级的字体大小设置为0来解决此问题。然后,您需要在任何子元素上设置适当的字体大小,否则它们将从父级继承font-size:0。

nav {
    font-size: 0;
}

Updated codepen: http://codepen.io/sdsanders/pen/xGNmGJ?editors=110

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