Рассмотрим простую веб-страницу, подобную этой:
<!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 справа; все на одной линии. Как я могу это сделать?
Как бы вы это делали, это зависит от того, как вы хотите, чтобы интервал был там, где на самом деле есть контент. Эти методы будут работать с любыми тегами, я выбрал список здесь для простоты. Если вы используете 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 элемента. Вам нужно будет изменить ширину столбцов и возиться с тем, какие столбцы должны иметь такое выравнивание при каждом добавлении элемента.
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, который у вас уже есть в вашем примере кода.
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 или выше.