#css #css-position #vertical-alignment
#css #css-позиция #выравнивание по вертикали
Вопрос:
У меня возникли некоторые проблемы с выравниванием некоторого текста. Мне нужны два столбца, один с цифрами, а другой с текстом, вот так:
1 Запись один
2 Запись два
3 Запись три
4 Запись пять
5 Запись шесть
Левый столбец — Georgia, а правый — Arial (размеры шрифта немного отличаются). Я мог бы создать контейнер div для каждой строки и абсолютно точно расположить количество и текстовые абзацы так, чтобы они были вверху или внизу от них, что отлично работает. Проблема в том, что это означает, что я должен присвоить каждой строке фиксированную высоту, чтобы она отображалась правильно, что вызывает проблему, если текст должен занимать более одной строки (что вполне может произойти, поскольку текстовые записи являются динамическими).
Я хочу сделать это без использования таблицы и без использования абсолютного позиционирования, чтобы отдельные текстовые записи могли занимать более одной строки (и были совместимы с несколькими браузерами).
Комментарии:
1. Почему вы не хотите использовать таблицу для этого?
2. по какой-либо причине вы не используете
<ol>для этого, нужен ли числам собственный элемент?3. @AllisonC Потому что это упорядоченный список, а не таблица.
Ответ №1:
Согласно моему комментарию, я думаю, что лучшим элементом для этой работы является упорядоченный список.
ol {
font-family: georgia, serif;
font-size: 16px;
font-weight: bold;
}
ol li span {
font-family: arial, sans-serif;
font-weight: normal;
font-size: 12px;
} <ol>
<li><span>Entry one<br>text on another line</span></li>
<li><span>Entry two</span></li>
<li><span>Entry three</span></li>
<li><span>Entry five</span></li>
<li><span>Entry six</span></li>
</ol> С промежутком, позволяющим изменять font-family между «маркерами» списка и содержимым внутри, это могут быть разделы, если у вас есть содержимое блока.
Комментарии:
1. Ого! Я не уверен, как я это пропустил, конечно, это упорядоченный список, который отлично работает 🙂 Из интереса, если я хочу, чтобы маркеры / цифры были встроены, но я не хочу, чтобы текст проходил под ними, правильно ли использовать padding-left: 1.5em; list-style-position: outside; или есть более чистый способ? Кроме того, существует ли какой-либо кроссбраузерный способ удаления полной остановки после каждого числа? Большое спасибо за вашу помощь, мы ее очень ценим 🙂
2. @deshg: Относительно
"is there any cross browser way of removing the fullstop after each number"— какие браузеры вам нужно поддерживать?3. @thirtydot: Как можно больше браузеров, в идеале все, но я понимаю, что это большая просьба для большинства вещей в наши дни!!
4. @thirtydot и @claresuzy, я только что понял, что при использовании приведенного выше кода межстрочный интервал текста очень большой, если текст для одного маркера занимает 2 или более строк (я полагаю, 17 пикселей, чтобы соответствовать старому?). Есть ли какой-либо способ уменьшить межстрочный интервал только для текста, поскольку это не имеет никакого эффекта, когда я устанавливаю его в span, и если я устанавливаю его в li, то в firefox интервал намного больше, чем в любом другом браузере (что необычно). Я был бы очень признателен, если бы у вас были какие-либо идеи, почему это может быть? Большое спасибо
Ответ №2:
Вы должны просто использовать ol элемент с соответствующим стилем, что-то вроде этого:
Смотрите: http://jsfiddle.net/tPjQR
Если вы хотите использовать разные стили для числа и содержимого списка, вам нужно обернуть содержимое каждого из них li во что-то вроде span . Лучшего способа просто не существует.
ol {
font-family: Georgia, serif;
}
ol span {
font-family: Arial, sans-serif;
font-size: 17px
}
<ol>
<li><span>Entry one</span></li>
<li><span>Entry two</span></li>
<li><span>Entry three</span></li>
<li><span>Entry five</span></li>
<li><span>Entry six</span></li>
<li><span>Entry Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long</span></li>
</ol>