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

224

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

E.g.:

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» quot; - внутри и снаружи. С & quot; внутри & quot; вторые строки находятся на одном уровне с точками списка, а не с верхней строкой:

3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
second line of longer Text
4. 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

& Quot; 11. & Quot; и "12." не совпадают с вышеприведенным текстовым блоком по сравнению с «3». и "4.".

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

Ни один ответ не затрагивает актуальный вопрос. На самом деле вопрос заключается в том, как выровнять по левому краю цифры в списке, а по отдельности выровнять по левому краю текст элемента списка с текстом элемента над ним, когда этот текст переполняется во второй или последующей строке. По умолчанию - и почти в каждом ответе - цифры списка выровнены по правому краю, а текст элементов списка выровнен по левому краю. Jessie Westlake
Попробуйте установить padding-left only ... matzone
В случае, если кто-то наткнется на этот вопрос, кто просто ищет «отступ в базовом списке», взгляните на этот вопрос (stackoverflow.com/questions/17556496/…) и Наташа Банегас отвечают. SunnyRed
пользовательPali Madra добавил это как ответ, но он был удален из-за отсутствия дальнейшего расширения. Он сказал, что jsfiddle может быть тем, что вы ищете:jsfiddle.net/palimadra/CZuXY/1 bfavaretto

Ваш Ответ

14   ответов
1

ul{
    margin-left: 1em;
}

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

ответ пользователя 123444555621, Однако мне также нужно было добавить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>

3

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

9

ol или жеul в CSS

ol {
margin-left: 0;
padding-left: 3em;
list-style-position: outside;
}
Error: User Rate Limit Exceededjsfiddle.net/j7MEd kernfrucht
Error: User Rate Limit Exceededjsfiddle.net/j7MEd/1Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded kernfrucht
Error: User Rate Limit Exceeded kernfrucht
Error: User Rate Limit Exceeded
0

CSS provides only two values for its "list-style-position" - inside and outside. With "inside" second lines are flush with the list points not with the superior line:

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

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

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

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

CSS:

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

ol.classname li {margin: 0.5em 0 0 0; отступ слева: 0; позиция в стиле списка: снаружи;}

HTML:

<ol class="classname" style="margin:0 0 0 1.5em;">
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;
}
Error: User Rate Limit Exceeded
-1

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

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

) so you have to set the CSS to list-style: none;

Then, I made the whole list display: table-row. Here, why don't I just paste you the code instead of gabbing about it?

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

}

This seems to align the text in the 2nd div with the numbers in the ordered list in the first div. I've surrounded both the list and the text with a tag so that I can just tell all divs to display as inline-blocks. This lined them up nicely.

The margin is there to put a space between the period and the start of the text. Otherwise, they run right up against one another and it looks like an eyesore.

My employer wanted wrapped-around text (for longer bibliograhical entries) to line up with the start of the first line, not the left-hand margin. Originally I was fidgeting with a positive margin and a negative text indent, but then I realized that when I switched to two different divs, this had the effect of making it so that the text all lined up because the left-hand margin of the div was the margin where text naturally began. Thus, all I needed was a 0.2em margin to add some space, and everything else lined up swimmingly.

I hope this helps if OP was having a similar issue...I had a hard time understanding him/her.

34

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

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

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

Скриншот:

enter image description here

Error: User Rate Limit Exceededdeveloper.mozilla.org/en/docs/Web/CSS/list-style-position).
Error: User Rate Limit Exceededlist-style-position: outsideError: User Rate Limit Exceeded<li>.
0

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

Error: User Rate Limit Exceeded kernfrucht
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/

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

Error: User Rate Limit Exceeded kernfrucht
Error: User Rate Limit ExceededtypeError: User Rate Limit Exceeded<ol>Error: User Rate Limit Exceededstyle="list-style-type: "Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceededjsfiddle.net/j7MEd/5 kernfrucht
6

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

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

ul {
  list-style-position: outside;
}

Увидетьhttps://www.w3schools.com/cssref/pr_list-style-position.asp

Original Answer
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, используйте наследие:before запись с одним двоеточием.

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceededposition: relativeError: User Rate Limit Exceeded<li>Error: User Rate Limit Exceededposition: absoluteError: User Rate Limit Exceededjsfiddle.net/maryisdead/kgr4kError: User Rate Limit Exceeded
Error: User Rate Limit ExceededfooError: User Rate Limit Exceededcounter-reset, counter-incrementError: User Rate Limit Exceededcounter()Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded40px? That will break when the counters are wider than thatError: User Rate Limit Exceeded
4

в этом случае вы хотите элементы списка 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/

198

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

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

enter image description here

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded1emError: User Rate Limit Exceeded
Error: User Rate Limit Exceeded1em. oi60.tinypic.com/a0eyvs.jpgError: User Rate Limit Exceeded
Error: User Rate Limit Exceeded

Похожие вопросы