Как сохранить отступ во второй строке в упорядоченных списках через CSS?

Я хочу иметь "внутренний" список со списком маркеров или десятичными числами, которые находятся на одном уровне с превосходными текстовыми блоками. Вторые строки записей списка должны иметь тот же отступ, что и первая строка!

например:.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Aenean commodo ligula eget dolor. Aenean Aenean massa. 
Cum sociis natoque penatibus et magnis dis parturient montes, 
nascetur ridiculus mus. Donec quam felis,

1. Text
2. Text
3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
   second line of longer Text
4. Text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Aenean commodo ligula eget dolor.

CSS предоставляет только два значения для своей "позиции в стиле списка" - внутри и снаружи. С "внутри" вторая строка заподлицо с точками списка не с верхней строкой:

3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
second line of longer Text
4. Text

Ширина "вне" мой список больше не сглаживается с превосходными текстовыми блоками.

Эксперименты ширины text-indent, padding-left и margin-left работают для неупорядоченных списков, но они не работают для упорядоченных списков, поскольку они зависят от десятичного числа символов:

 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
 Aenean commodo ligula eget dolor. 

 3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
    second line of longer Text
 4. Text
11. Text
12. Text

"11". и "12." не совпадают с превосходным текстовым блоком по сравнению с "3." и "4.".

Итак, где секрет о упорядоченных списках и отступ второй строки? Спасибо за ваши усилия!

Ответ 1

Обновление

Этот ответ устарел. Вы можете сделать это намного проще, как указано Я удивлен, увидев, что это еще не решено. Вы можете использовать алгоритм макета таблицы браузера (без использования таблиц) следующим образом:

ul {
  list-style-position: outside;
}

см. https://www.w3schools.com/cssref/pr_list-style-position.asp

Оригинальный ответ

ol {
    counter-reset: foo;
    display: table;
}

ol > li {
    counter-increment: foo;
    display: table-row;
}

ol > li::before {
    content: counter(foo) ".";
    display: table-cell; /* aha! */
    text-align: right;
}

Демонстрация: http://jsfiddle.net/4rnNK/1/

Чтобы заставить его работать в IE8, используйте устаревшую нотацию :before с одним двоеточием.

Ответ 2

Я считаю, что это сделает то, что вы ищете.

.cssClass li {
    list-style-type: disc;
    list-style-position: inside;
    text-indent: -1em;
    padding-left: 1em;
}

JSFiddle: https://jsfiddle.net/dzbos70f/

Ответ 3

Самый простой и чистый способ, без всяких взломов, это просто сделать отступ для ul (или ol), например так:

ol {
  padding-left: 40px;
  list-style-position: outside; // Only necessary if you've set it to "inside" elsewhere
}

Это дает тот же результат, что и принятый ответ: https://jsfiddle.net/af2fqryz/

Снимок экрана:

Ответ 4

Проверьте эту скрипту:

http://jsfiddle.net/K6bLp/

Он показывает, как вручную отступать ul и ol с помощью CSS.

HTML

<head>
    <title>Lines</title>
</head>

<body>
    <ol type="1" style="list-style-position:inside;">
        <li>Text</li>
        <li>Text</li>
        <li >longer Text, longer Text, longer Text, longer Text    second line of longer Text        </li>
    </ol>  
    <br/>
    <ul>
        <li>Text</li>
        <li>Text</li>
        <li>longer Text, longer Text, longer Text, longer Text    second line of longer Text                </li>
    </ul>
</body>

CSS

ol 
{
    margin:0px;
    padding-left:15px;
}

ol li 
{
    margin: 0px;
    padding: 0px;
    text-indent: -1em;
    margin-left: 1em;
}

ul
{
    margin:0;
    padding-left:30px;
}

ul li 
{
    margin: 0px;
    padding: 0px;
    text-indent: 0.5em;
    margin-left: -0.5em;
}

Также я отредактировал ваш скрипт

http://jsfiddle.net/j7MEd/3/

Обратите внимание на это.

Ответ 5

В поле CSS

можно задать значение поля и отступов либо ol, либо ul

ol {
margin-left: 0;
padding-left: 3em;
list-style-position: outside;
}

Ответ 6

Я считаю, что вам просто нужно поместить список "пуля" за пределы прокладки.

li {
    list-style-position: outside;
    padding-left: 1em;
}

Ответ 7

Вы можете использовать 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/

Ответ 8

Мое решение такое же, как Pumbaa80, но я предлагаю использовать display: table вместо display:table-row для элемента li. Итак, это будет примерно так:

ol {
    counter-reset: foo; /* default display:list-item */
}

ol > li {
    counter-increment: foo;
    display: table; /* instead of table-row */
}

ol > li::before {
    content: counter(foo) ".";
    display: table-cell;
    text-align: right;
}

Итак, теперь мы можем использовать поля для интервала между li 's

Ответ 9

Я очень люблю это решение:

ul {
    list-style-position: inside;
    list-style-type: disc;
    font-size: 12px;
    line-height: 1.4em;
    padding: 0 1em;
}

ul li {
    margin: 0 0 0 1em;
    padding: 0 0 0 1em;
    text-indent: -2em;
}

Ответ 10

Следующий CSS сделал свое дело:

ul{
    margin-left: 1em;
}

li{
    list-style-position: outside;
    padding-left: 0.5em;
}

Ответ 11

Списки ol, ul будут работать, если вы хотите, вы также можете использовать таблицу с границей: none в css.

Ответ 12

В упорядоченных списках без вмешательства, если вы укажете "list-style-position" значение "внутри", вторая строка длинного списка не будет иметь отступ, но вернется к левому краю списка (т.е. он будет выравниваться по левому краю с номером элемента). Это характерно для упорядоченных списков и не происходит в неупорядоченных списках.

Если вместо "position-style-position" вместо "list-style-position" значение "снаружи", вторая строка будет иметь тот же отступ, что и первая строка.

У меня был список с границей и возникла эта проблема. Когда "list-style-position" установлено в "inside", мой список не выглядел так, как хотелось бы. Но если "list-style-position" установлен на "outside", номера элементов списка выпадают вне поля.

Я решил это, просто установив более широкий левый край для всего списка, который переместил весь список вправо, назад в позицию, в которой он находился раньше.

CSS

ol.classname {margin: 0; padding: 0;}

ol.classname li {margin: 0.5em 0 0 0; padding-left: 0; list-style-position: outside;}

HTML:

<ol class="classname" style="margin:0 0 0 1.5em;">

Ответ 13

Хорошо, я вернулся и понял кое-что. Это РАСПРОСТРАНЕНИЕ РЕШЕНИЙ к тому, что я предлагаю, но он кажется функциональным.

Во-первых, я сделал номера серией неупорядоченных списков. В неупорядоченном списке обычно будет диск в начале каждого элемента списка (

), поэтому вам нужно установить CSS в list-style: none;

Затем я отобразил весь список: table-row. Вот почему я не просто вставляю код вместо того, чтобы болтать об этом?

<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    <title>Result</title>
</head>
<body>
    <div><ul>
        <li>1.</li>
        <li><p>2.</p></li>
        <li>10.</li>
        <li><p>110.</p></li>
        <li>1000.</li>
    </ul>
    </div>
    <div>
        <p>Some author</p>
        <p>Another author</p>
        <p>Author #10</p>
        <p>Author #110</p>
        <p>The one thousandth author today will win a free i-Pod!!!! This line also wraps around so that we can see how hanging indents look.</p>
        </div>
</body>
</html>'

CSS

ul li{
list-style: none;
display: table-row;
text-align: right;

}

div {
float: left;
display: inline-block;
margin: 0.2em;

}

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

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

Мой работодатель хотел обернуть текст (для более длинных библиографических записей), чтобы совпасть с началом первой строки, а не с левым краем. Первоначально я ерзал с положительным запасом и отрицательным отступом текста, но потом я понял, что когда я переключился на два разных div, это привело к тому, что текст был выровнен, так как левый край div была маркой, где естественно начинался текст. Таким образом, все, что мне было нужно, - это 0,2-кратный запас, чтобы добавить некоторое пространство, и все остальное выстроилось плавно.

Надеюсь, это поможет, если у ОР возникнет подобная проблема... Мне было трудно понять его/ее.

Ответ 14

У меня была эта же проблема и я начал использовать user123444555621 ответ. Однако мне также нужно добавить padding и border к каждому li, которое это решение не позволяет, потому что каждый li является table-row.

Сначала мы используем counter для тиражирования чисел ol.

Затем мы устанавливаем display: table; на каждый li и display: table-cell на :before, чтобы дать нам отступы.

Наконец, сложная часть. Поскольку мы не используем макет таблицы для всего ol, нам нужно убедиться, что каждый :before имеет одинаковую ширину. Мы можем использовать ch unit, чтобы примерно сохранить ширину, равную количеству символов. Чтобы обеспечить равномерность ширины, когда количество цифр для :before отличается, мы можем реализовать количество запросов. Предполагая, что вы знаете, что в ваших списках не будет 100 или более единиц, вам нужно только одно правило запроса количества, чтобы сообщить :before изменить его ширину, но вы можете легко добавить больше.

ol {
  counter-reset: ol-num;
  margin: 0;
  padding: 0;
}

ol li {
  counter-increment: ol-num;
  display: table;
  padding: 0.2em 0.4em;
  border-bottom: solid 1px gray;
}

ol li:before {
  content: counter(ol-num) ".";
  display: table-cell;
  width: 2ch; /* approximately two characters wide */
  padding-right: 0.4em;
  text-align: right;
}

/* two digits */
ol li:nth-last-child(n+10):before,
ol li:nth-last-child(n+10) ~ li:before {
  width: 3ch;
}

/* three digits */
ol li:nth-last-child(n+100):before,
ol li:nth-last-child(n+100) ~ li:before {
  width: 4ch;
}

<ol>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
</ol>