Выравнивание текста: оправдать добавление пробела

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;
}

Обновленный код: http://codepen.io/sdsanders/pen/xGNmGJ?editors=110