правильный отступ для упорядоченных списков в html - PullRequest
Новая
       3

правильный отступ для упорядоченных списков в html

8 голосов
/ 21 сентября 2010

Я не могу получить упорядоченный список, чтобы показать правильные отступы. Числа все выровнены вправо. Таким образом, браузер (Chrome) показывает пробел перед однозначными числами и корректно выравнивает только двузначные числа влево.

Как вывести хороший упорядоченный список, в котором все номера выровнены по левому краю, а все элементы списка начинаются друг под другом?

Ответы [ 5 ]

15 голосов
/ 21 сентября 2010

На самом деле, решение довольно простое, просто установите 

ol {list-style-position: inside;}

И ваши числа должны «выровняться влево», как вы хотите.

4 голосов
/ 24 сентября 2012

Поздно до вечеринки, но я только что боролся с этой проблемой сам и в итоге использовал это комбо, которое добавляет ноль перед любыми однозначными элементами списка: 

ol {
    margin:0px 0;
    padding:0;
    list-style: decimal-leading-zero inside none;
}

ol li 
{
    margin: 0px;
    padding: 0px;
    text-indent: -2.2em;
    margin-left: 3.4em;
}
1 голос
/ 21 сентября 2010

Если вы не возражаете против использования абсолютного позиционирования, это может сработать для вас. 

<style type="text/css">
li {
    list-style-position: inside;
}
.li-content {
    position: absolute;
    left: 80px;
}
</style>

<ol>
  <li><span class="li-content">Test content</span></li>
    (...)
  <li><span class="li-content">Test content</span></li>
</ol>

Примечание: Если на вашей странице слева от элемента <ol> есть что-то (например, плавающий элемент div), этот контент будет перемещать цифры вправо, но не острый <li> содержание.

Вы также можете использовать совершенно другую технику с другой разметкой (вложенные элементы div) с установленными свойствами display: table и display: table-cell. Это устранило бы проблему с элементами, появляющимися слева, но потребовало бы, чтобы вы использовали свойство CSS counter.

0 голосов
/ 19 мая 2018

Джо Спрэг была не слишком далеко, но на самом деле она снаружи, а не внутри, как указано выше.

Это сразу становится очевидным, если содержимое li переносится на новую строку.1005 *

Вот хороший кодовый блок https://codepen.io/pen/ для тестирования.

0 голосов
/ 30 ноября 2012

Вы можете использовать CSS для выбора диапазона; в этом случае вы хотите элементы списка 1-9: 

ol li:nth-child(n+1):nth-child(-n+9)

Затем настройте поля для этих первых элементов соответствующим образом: 

ol li:nth-child(n+1):nth-child(-n+9) { margin-left: .55em; }
ol li:nth-child(n+1):nth-child(-n+9) em,
ol li:nth-child(n+1):nth-child(-n+9) span { margin-left: 19px; }

Смотрите это в действии здесь: http://www.wortfm.org/wort-madison-charts-for-the-week-beginning-11192012/

...