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

260

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

Например:

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

Ширина "вне" моего списка больше не совпадает с улучшенными текстовыми блоками.

Ширина эксперимента 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".

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

html css html-lists

— kernfrucht
источник

1

Пользователь Pali Madra добавил это как ответ, но он был удален за то, что не содержал дальнейшего расширения. Он сказал, что jsfiddle может быть тем, что вы ищете: jsfiddle.net/palimadra/CZuXY/1

— bfavaretto

Попробуйте установить padding-left only ...

— matzone

3

В случае, если кто-то наткнется на этот вопрос, который просто ищет «отступ в базовом списке», взгляните на этот вопрос ( stackoverflow.com/questions/17556496/… ) и ответ Наташа Банегас.

— SunnyRed

Ни один ответ не затрагивает актуальный вопрос. На самом деле вопрос заключается в том, как выровнять по левому краю цифры в списке, а по отдельности выровнять по левому краю текст элемента списка с текстом элемента над ним, когда этот текст переполняется во вторую или последующую строку. По умолчанию - и почти в каждом ответе - цифры списка выравниваются по правому краю, а текст элементов списка - по левому краю.

— Джесси Уэстлейк,

267

Обновить

Этот ответ устарел. Вы можете сделать это намного проще, как указано в другом ответе ниже:

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нотацию с одним двоеточием.

— user123444555621
источник

2

@Perelli fooпросто произвольная строка (идентификатор), он используется для подключения counter-reset, counter-incrementи counter()свойства.

— user123444555621

3

Вы также можете избежать шаткий таблицы вещи, используя position: relativeна <li>и position: absoluteна генерируемый контент. См. Jsfiddle.net/maryisdead/kgr4k для примера.

— maryisdead

2

@maryisdead Почему 40px? Это сломается, когда счетчики будут шире . Смысл использования макета таблицы в том, что браузер автоматически подгоняет контент.

— user123444555621

5

Хорошо, но как вы контролируете <li> нижнее поле? Высота <li> определяется исключительно высотой элементов ячейки таблицы в нем. Таким образом, поля, отступы и высота этих элементов не влияют. Как обойти это ограничение?

— hschmieder

3

Если у вас есть многострочные элементы списка, и вам нужен постоянный вертикальный интервал, решение состоит в том, чтобы добавить вертикальный интервал границы к селектору ol, например, border-spacing: 0 3px; Нормальное заполнение ячейки таблицы не работает, потому что число всегда составляет только одну строку.

— RemBem

207

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

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

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

— JTOrlando
источник

21

лучше, если вы также добавите padding-left: 1em;

— Бенс Гаксали

16

Это, безусловно, лучший ответ из всех решений на этой странице. Это намного удобнее, чем другие. Если вы сомневаетесь, какой ответ выбрать, выберите этот.

— Валентин Мерсье

25

@loremmonkey Это быстро и грязно, но это не настоящее решение. Во-первых, 1emне равно пробелу. Линии не будут идеально выровнены по пикселям. Во-вторых, а когда список достигает числа 10? 100? Отступ текста не будет работать, он не будет выровнен. Этот ответ должен быть отклонен.

— Солнечно,

1

@Sunny Это список дисков, а не нумерация, так зачем считать до 100? Я не вижу никаких проблем с моими списками, используя код выше.

— Lorem Monkey

2

@loremmonkey Отступ не является 1em. oi60.tinypic.com/a0eyvs.jpg Первый элемент списка использует метод текстового отступа выше. По сравнению с тем, как это обычно выглядит с позицией в стиле списка: снаружи он выровнен, в данном случае - на пиксель.

— Солнечно,

39

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

ol {
  padding-left: 40px; // Or whatever padding your font size needs
  list-style-position: outside; // OPTIONAL: Only necessary if you've set it to "inside" elsewhere
}

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

Скриншот:

— Чак Ле Батт
источник

1

Возможно, вам придется обратиться list-style-position: outsideв <li>.

— Алекс

@Alex Вам следует делать это только в том случае, если вы пытаетесь перезаписать существующий стиль ( developer.mozilla.org/en/docs/Web/CSS/list-style-position ).

— Чак Ле Батт

25

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

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/

Запишите это.

— Дипан Бабу
источник

спасибо, это прекрасно работает для UL и для OL до 9 записей в списке. Это главная проблема, которую я описал в своем вопросе о ширине 11/12. В моем примере выше я использую другую технику, поэтому проблема выглядит иначе, но суть проблемы остается той же: есть разница, если моя точка десятичного списка имеет одну или две или более цифр - например, 1., 11. или 111.! Я не вижу смысла, когда я могу реагировать через CSS и корректировать отступ текста и оставленное поле в соответствии с количеством чисел.

— Кернфрухт

Для второй строки отступ ол (больше, чем цифра), я думаю, CSS не решит это. Мы должны идти только за jquery.

— Дипан Бабу

Также обратите внимание, что typeатрибут для <ol>в HTML 5 выглядит устаревшим. Используйте style="list-style-type: "вместо этого.

— AJ.

2

21 человек из вас вообще серьезен? это не работает. Не уверен, что вы изменили свой код с момента публикации.

— JGallardo

9

Вы можете установить поля и отступы либо в CSS, olлибо ulв CSS.

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

— luke2012
источник

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

— kernfrucht

11 и 12 в jsfiddle.net/j7MEd/1 совпадают с верхним и нижним абзацами, и я не изменил код. Я что-то упускаю?

— luke2012

нет, это не главное. Основная проблема заключается в том, что вторая (и третья и т. Д.) Строка каждой точки списка имеет не такой же «отступ», как первая строка! (см. пример jsfiddle). В моем вопросе выше я думаю об обходном пути с отступами, полем и т. Д., Но он работает только для неупорядоченных списков. В упорядоченном списке появляются новые проблемы, подобные этой 11/12. Итак, мой главный вопрос: как я могу выполнить задачу отступа (как я представляю в моем самом первом примере моего использования) для упорядоченных списков, не имея таких проблем, как вещь 11/12.

— Кернфрухт

Хорошо, извини, понял! Это один из способов ... единственная проблема заключается в достижении кросс-браузера, вам нужно будет установить поле в IE и отступ в Firefox. jsfiddle.net/j7MEd/2

— luke2012

7

Я полагаю, вам просто нужно поместить список 'bullet' вне отступов.

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

— KnownColor
источник

6

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

— LaFaucon
источник

5

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

ul{
    margin-left: 1em;
}

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

— itoctopus
источник

4

мое решение совершенно так же , как Pumbaa80 одного «s, но я предлагаю использовать 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«с

— Alex
источник

1

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

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

— Кори Баллу
источник

Единственный проблемный размер шрифта

— 17

0

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

— Casualbot
источник

я думаю, что это не очень хорошее решение относительно семантических правил

— kernfrucht

0

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

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

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

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

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

CSS:

ol.classname {margin: 0; отступ: 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;">

— Крис
источник

-1

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

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

) поэтому вы должны установить CSS в стиль списка: нет;

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

<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. Я окружил список и текст тегом, чтобы я мог просто указать всем элементам div отображать их в виде встроенных блоков. Это выровняло их хорошо.

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

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

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

— Дэвид
источник

-1

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

Во-первых, мы используем counterдля репликации olчисел.

Затем мы устанавливаем 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>

Развернуть фрагмент

— Джейкоб Альварес
источник