Як зберегти відступ для другого рядка в упорядкованих списках через 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 надає лише два значення для свого "списку-стилю-позиції" - всередині і зовні. З "внутрішнім" другим рядком узгоджуються точки списку, а не верхній рядок:

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

Тож де секрет про упорядковані списки та відступ другого рядка? Дякуємо за ваші зусилля!

html  css  html-lists 
— kernfrucht
джерело
1
Користувач Pali Madra додав це як відповідь, але його видалили, оскільки він не мав подальшого пояснення. Він сказав, що jsfiddle може бути те, що ви шукаєте: jsfiddle.net/palimadra/CZuXY/1
— bfavaretto
Спробуйте встановити лише підкладки зліва ...
— 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()властивості.
— користувач123444555621
3
Ви також можете уникнути хиткий таблиці речі, використовуючи position: relativeна <li>і position: absoluteна що генерується контент. Для прикладу див. Jsfiddle.net/maryisdead/kgr4k .
— maryisdead
2
@maryisdead Чому 40px? Це зламається, коли лічильники ширші за це . Вся суть використання макета таблиці полягає в тому, що браузер автоматично підходить до вмісту.
— користувач123444555621
5
Добре, але як ви контролюєте <li> нижню маржу? Висота <li> визначається виключно висотою елементів таблиці-комірки в ній. Таким чином, запас, прокладка та висота на цих елементах не впливають. Як обійти це обмеження?
— hschmieder
3
Якщо у вас є рядки списку з декількома рядками та потребують послідовного вертикального проміжку, рішенням слід додати вертикальний інтервал між рамками до селектора ol, наприклад, інтервал між межами: 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
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/

Запишіть це.

— Deepan Babu
джерело
дякую, він чудово підходить для UL та для OL до 9 записів у списку. Це головна проблема, яку я описав у ширині мого питання 11/12. У своєму прикладі вище я запускаю іншу техніку, тому проблема виглядає інакше, але суть проблеми залишається такою ж: Є різниця, якщо в моєму десятковому списку є одна або дві чи більше числових цифр - наприклад, 1., 11. або 111.! Я не бачу сенсу, коли я можу реагувати через CSS і відрегулювати текстовий відступ та лівий запас під числом чисел.
— kernfrucht
Для другого рядкового відступу ol (більше цифри), я думаю, що CSS це не вирішить. Ми повинні тільки йти на jquery.
— Deepan Babu
Також зауважте, що typeатрибут for <ol>здається застарілим у HTML 5. Використовуйте style="list-style-type: "замість цього.
— AJ.
2
21 з вас людей навіть серйозні? це не працює. Не впевнений, чи змінили ви код з моменту публікації.
— JGallardo
9

Ви можете встановити поле або заповнення 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.
— kernfrucht
Гаразд вибачте, я! Це один із способів .. Єдина проблема полягає в тому, щоб досягти крос-браузера, вам потрібно буде встановити запас в IE і прокладку в Firefox. jsfiddle.net/j7MEd/2
— luke2012
7

Я вважаю, що вам просто потрібно поставити список "куля" поза підкладкою.

li {
    list-style-position: outside;
    padding-left: 1em;
}
— Відомий колір
джерело
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;
}
— іктоктоп
джерело
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's

— Олексій
джерело
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;
}
— Корі Баллу
джерело
єдиний проблемний розмір шрифту
— atilkan
0

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

— Casualbot
джерело
Я думаю, що це не вдале рішення щодо семантичних правил
— kernfrucht
0

CSS надає лише два значення для свого "списку-стилю-позиції" - всередині і зовні. З "внутрішнім" другим рядком узгоджуються точки списку, а не верхній рядок:

У упорядкованих списках без втручання, якщо ви надаєте "list-style-position" значення "всередині", другий рядок елемента довгого списку не матиме відступу, але повернеться до лівого краю списку (тобто його буде вирівняно ліворуч з номером елемента). Це властиво упорядкованим спискам і не відбувається в упорядкованих списках.

Якщо ви замість цього даєте "list-style-position" значення "назовні", другий рядок матиме такий же відступ, як і перший рядок.

У мене був список з кордоном і була ця проблема. Якщо "список-стиль-позиція" встановлений на "всередині", мій список не виглядав так, як я цього хотів. Але якщо "список-стиль-позиція" встановлено на "зовні", номери елементів списку потрапляють поза рамки.

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

CSS:

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

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

HTML:

<ol class="classname" style="margin:0 0 0 1.5em;">
— Кріс
джерело
-1

Гаразд, я повернувся назад і подумав про деякі речі. Це РОШЕ РІШЕННЯ до того, що я пропонував, але це, здається, є функціональним.

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

  • ), тож вам доведеться встановити CSS у стилі list: 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;

    }

    Це здається, щоб вирівняти текст у другому розділі з номерами в упорядкованому списку в першому розділі. Я оточив і список, і текст тегом, щоб я міг просто сказати всім divs відображатись як вбудовані блоки. Це чудово вишикувало їх.

    Поля є там, щоб розмістити проміжок між періодом і початком тексту. В іншому випадку вони бігають прямо один проти одного, і це виглядає як очі.

    Мій роботодавець хотів, щоб обгорнутий текст (для більш довгих бібліографічних записів) узгоджувався з початком першого рядка, а не з лівим полем. Спочатку я перебирався з позитивним відривом і від'ємним текстовим відступом, але потім зрозумів, що коли я перейшов до двох різних дівок, це призвело до того, що текст все вишикувався, тому що лівий край діва була полем, де текст, природно, починався. Таким чином, все, що мені було потрібно, було запасом 0,2ем, щоб додати трохи місця, а все інше вишикувалось плавно.

    Я сподіваюся, що це допоможе, якщо у ОП виникли подібні проблеми ... Мені важко було зрозуміти його / її.

    • — Девід
    джерело
    -1

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

    По-перше, ми використовуємо a counterдля копіювання olчисел.

    Потім ми встановлюємо display: table;на кожному liі display: table-cellна :beforeдати нам відступ.

    Нарешті, хитра частина. Оскільки ми не використовуємо макет таблиці для цілого, olнам потрібно переконатися, що кожна :beforeоднакова ширина. Ми можемо використовувати chпристрій, щоб приблизно зберегти ширину, рівну кількості символів. Для того, щоб ширини були рівномірними, коли кількість цифр для :befores відрізняється, ми можемо реалізувати запити кількості . Припустимо, що ви знаєте, що ваших списків не буде 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>
    Розгорніть фрагмент

    — Яків Альварес
    джерело
    Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
    Licensed under cc by-sa 3.0 with attribution required.