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

Question

Как сохранить отступ для второй строки в упорядоченных списках через 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 предоставляет только два значения для его "list-style-position" - внутри и снаружи. С "внутри" вторые строки заподлицо со списком точек не с верхней линией:

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. 

 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.".

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

204

css html html-lists

автор: Deepan Babu

14 ответов

автор: user123444555621 · Accepted Answer · 2018-08-21 00:11:58

обновление

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

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/

enter image description here

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

автор: JTOrlando · Accepted Answer · 2017-07-06 09:54:17

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

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

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

автор: Chuck Le Butt · Accepted Answer · 2017-09-19 11:14:06

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

ol {
  padding-left: 40px;
  list-style-position: outside;
}

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

скриншоты:

автор: Deepan Babu · Accepted Answer · 2012-05-03 14:03:48

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

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/

запишите его.

автор: luke2012 · Accepted Answer · 2012-05-03 13:13:49

вы можете задать margin и padding либо ol или ul в CSS

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

автор: KnownColor · Accepted Answer · 2015-03-24 23:23:31

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

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

автор: LaFaucon · Accepted Answer · 2012-11-30 14:34:27

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

автор: Alex · Accepted Answer · 2017-05-23 11:47:24

мое решение совершенно такое же, как 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

автор: Corey Ballou · Accepted Answer · 2016-10-20 10:35:05

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

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;
}

автор: itoctopus · Accepted Answer · 2018-07-17 19:48:15

следующий CSS сделал трюк:

ul{
    margin-left: 1em;
}

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

автор: Casualbot · Accepted Answer · 2012-06-06 20:04:25

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

автор: David · Accepted Answer · 2013-10-15 19:35:17

хорошо, я вернулся и кое-что выяснил. Это грубое решение того, что я предлагал, но оно кажется функциональным.

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

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

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

<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;

}

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

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

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

Я надеюсь, что это поможет, если у OP была аналогичная проблема...Мне было трудно понять его / ее.

автор: Chris · Accepted Answer · 2013-11-25 17:24:32

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

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

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

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

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

CSS:

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

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

HTML-код:

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

автор: Jacob Alvarez · Accepted Answer · 2017-05-23 12:03:05

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

во-первых, мы используем counter повторить 'ы.

затем мы ставим display: table; в каждом li и display: table-cell на :before чтобы дать нам вмятины.

наконец, самая сложная часть. Так как мы не используйте макет таблицы для всего ol мы должны обеспечить каждого :before такая же ширина. Мы можем использовать ch блок чтобы примерно сохранить ширину, равную количеству символов. Для того, чтобы сохранить ширину равномерной, когда количество цифр для :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>