Оправдать одну строку HTML-текста, чтобы заполнить всю строку?

Question

У меня есть панель навигации со ссылками внутри и вокруг высоты. Мне бы хотелось, чтобы она была прямо сейчас, но я хочу, чтобы кнопки располагались равномерно, но text-align:justify; не работает Я что-то не так делаю?

http://jsfiddle.net/xuEY6/

Answer 1

Добавлять

#navigation:after { /* Justify last line */
    content: '';
    display: inline-block;
    width: 100%;
}
#navigation { /* Fix added space */
    height: 1.15em;
    line-height: 1.15;
}

демонстрация

Answer 2

Если вы добавите в строку #navigation:text-align-last:justify; будет работать нормально

Answer 3

Если у вас все в порядке без поддержки Safari, то теперь есть нативное решение, text-align-lastсвойство:

text-align-last: justify;

Примените это к любому тексту, и его последняя (или единственная) строка будет оправдана, тогда как обычнаяtext-alignСвойство влияет на все строки, кроме последней (или ни на одну, если это только одна строка).

Это поддерживается во всех основных браузерах, кроме Safari. Chrome 47+, Edge 12+, Firefox 49+ и Opera. Даже IE 5.5+ поддерживает его (!), Ноtext-align: justify;также должен быть настроен на работу.

В Safari есть отчет об ошибках, позволяющий отслеживать его состояние, однако это была лучшая часть десятилетия без каких-либо обновлений, поэтому Apple действительно следует в ближайшее время активизировать свою игру.

Answer 4

your links need to have width to fill the line. specify the with as a % to fill the line

take a look at this http://getbootstrap.com/components/