Как имитировать \hfill с HTML и CSS?

Рассмотрим простую веб-страницу, подобную этой:

<!DOCTYPE html>
<html><head><title>Test!</title></head>
<body>
<p>a b c</p>
</body></html>

Я бы хотел, чтобы a b c отформатирован так, как если бы я написал a\hfill b\hfill c в TeX. Это: a слева, затем b центрировано, затем c справа; все на одной линии. Как я могу это сделать?

Ответ 1

Как бы вы это делали, это зависит от того, как вы хотите, чтобы интервал был там, где на самом деле есть контент. Эти методы будут работать с любыми тегами, я выбрал список здесь для простоты. Если вы используете p и span, замените ul на p и li на span.

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

Все три из этих методов работают без изменения порядка источника. Поплавки могут выполнять эту работу, но вам нужно будет поставить c до b, чтобы она работала правильно.


Этот метод использует flexbox и предполагает, что элементы, содержащие a, b и c, достаточно велики, чтобы их содержать, а пространство между ними равно (если a больше b, то b не будет центрироваться), flexbox имеет множество опций для определения поведения, связанного с упаковкой, но по умолчанию это не делается вообще.

http://jsfiddle.net/4g8NY/1/ (префиксы не включены)

ul {
    display: flex;
    justify-content: space-between;
}

Flexbox не имеет очень широкой поддержки на данный момент, из-за того, что IE10 является первой версией IE для ее поддержки. http://caniuse.com/#search=flexbox


Вы можете использовать семейство display: table вместе с выравниванием текста, чтобы придать иллюзию, что элементы распределены по желанию, но их контейнеры занимают 33% от их родительской ширины. В этом примере b должен оставаться полностью центрированным независимо от фактического содержимого. Ваши элементы также равны по высоте и будут вынуждены появляться в одной строке независимо от того, что.

В отличие от других методов, это предполагает, что будет только 3 элемента. Вам нужно будет изменить ширину столбцов и возиться с тем, какие столбцы должны иметь такое выравнивание при каждом добавлении элемента.

http://jsfiddle.net/4g8NY/2/

ul {
    display: table;
    width: 100%;
}

li {
    display: table-cell;
    width: 33%;
}

li:nth-child(2) {
    text-align: center;
}

li:last-child {
    text-align: right;
}

Поддержка этой техники очень хороша, так как все наши свойства доступны в IE8 (IE8 - это мое официальное сокращение, IE7 и более старые не считаются "поддерживаемыми браузерами" ).


Третий метод включает использование псевдоэлемента в качестве последней строки родительского элемента, чтобы мы могли оправдать a, b и c. Невозможно предотвратить обертку с помощью этой техники, если элементы не помещаются в одну строку.

В отличие от других методов, дополнительная разметка не требуется. Это может быть только тег p, который у вас уже есть в вашем примере кода.

http://jsfiddle.net/4g8NY/3/

ul {
    text-align: justify;
}

ul:after {
    content: " ";
    display: inline-block;
    width: 100%;
}

li {
    display: inline; /* if you're using an element that already `inline` like a span, you don't need this */
}

Подобно описанному выше методу, он работает в IE8 или выше.