Как я могу получить отступ второй (третьей и т. Д.) Строки, чтобы сопоставить первую строку в списке с пользовательской нумерацией с помощью CSS?

Я новичок в HTML, CSS и JavaScript, так что это может быть очень простой проблемой, однако я не смог найти решение с помощью поиска. Большинство решений, которые я нашел, имеют дело с автоматически нумерованными списками или неупорядоченными списками.

Я использую Javascript для заполнения списка на веб-странице из документа JSON. Выходной список HTML выглядит следующим образом:

<article>
    <div>
        <ul class='foo'><li class='num'>1.</li><li class='txt'>bar</li></ul>
        <ul class='foo'><li class='num'>2.</li><li class='txt'>foo</li></ul>
        <ul class='foo'><li class='num'>2a.</li><li class='txt'>very long test here so that it moves to a new line on the webpage</li></ul>
        <ul class='foo'><li class='num'>5.</li><li class='txt'>bar</li></ul>
        <ul class='foo'><li class='num'>6.</li><li class='txt'>foo</li></ul>
    </div>
</article>

Затем я использую CSS для стилизации их, чтобы они выглядели как единый список:

.foo li{
    display: inline;
    padding-left: 20px;
}

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

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

Как мне сохранить собственную нумерацию списка, но контролировать согласованность отступов на нескольких строках?

Источник

3 ответа

Решение

Вы можете представить свой список в виде таблицы:

ul.foo {
     display: table;
}
ul.foo > li {
    display: table-cell;
}
ul.foo > li.num {
    min-width: 40px;
}

Демо: http://jsfiddle.net/xbsp30kd/1/

Источник

Самый простой способ предотвратить это - просто дать элемент списка. display: table-cell:

.foo li {
  display: table-cell;
  padding-left: 20px;
}
<article>
  <div>
    <ul class='foo'>
      <li class='num'>1.</li>
      <li class='txt'>bar</li>
    </ul>
    <ul class='foo'>
      <li class='num'>2.</li>
      <li class='txt'>foo</li>
    </ul>
    <ul class='foo'>
      <li class='num'>2a.</li>
      <li class='txt'>very long test here so that it moves to a new line on the webpage</li>
    </ul>
    <ul class='foo'>
      <li class='num'>5.</li>
      <li class='txt'>bar</li>
    </ul>
    <ul class='foo'>
      <li class='num'>6.</li>
      <li class='txt'>foo</li>
    </ul>
  </div>
</article>

В качестве альтернативы, вы можете использовать display: flex на родителя и display: inline-flex в элементе списка:

.foo {
  display: flex;
}

.foo li {
  display: inline-flex;
  padding-left: 20px;
}
<article>
  <div>
    <ul class='foo'>
      <li class='num'>1.</li>
      <li class='txt'>bar</li>
    </ul>
    <ul class='foo'>
      <li class='num'>2.</li>
      <li class='txt'>foo</li>
    </ul>
    <ul class='foo'>
      <li class='num'>2a.</li>
      <li class='txt'>very long test here so that it moves to a new line on the webpage</li>
    </ul>
    <ul class='foo'>
      <li class='num'>5.</li>
      <li class='txt'>bar</li>
    </ul>
    <ul class='foo'>
      <li class='num'>6.</li>
      <li class='txt'>foo</li>
    </ul>
  </div>
</article>

Если вы хотите, чтобы текст был "полностью" в строке, вы хотите дать margin-left: -8px к элементу с дополнительной буквой в нумерации:

.foo {
  display: flex;
}

.foo li {
  display: inline-flex;
  padding-left: 20px;
}

.foo .long {
  margin-left: -8px;
}
<article>
  <div>
    <ul class='foo'>
      <li class='num'>1.</li>
      <li class='txt'>bar</li>
    </ul>
    <ul class='foo'>
      <li class='num'>2.</li>
      <li class='txt'>foo</li>
    </ul>
    <ul class='foo'>
      <li class='num'>2a.</li>
      <li class='txt long'>very long test here so that it moves to a new line on the webpage</li>
    </ul>
    <ul class='foo'>
      <li class='num'>5.</li>
      <li class='txt'>bar</li>
    </ul>
    <ul class='foo'>
      <li class='num'>6.</li>
      <li class='txt'>foo</li>
    </ul>
  </div>
</article>

Сказав все это, "лучший" способ справиться с этим будет использовать только один <ul> и использовать list-style-type: decimal, Таким образом, отступ выравнивается, и ваша нумерация обрабатывается для вас автоматически:

.foo li {
  list-style-type: decimal;
  padding-left: 20px;
}
<article>
  <div>
    <ul class='foo'>
      <li>bar</li>
      <li>foo</li>
      <li>very long test here so that it moves to a new line on the webpage</li>
      <li>bar</li>
      <li>foo</li>
    </ul>
  </div>
</article>

Это может даже быть расширено, чтобы иметь подсписки, чтобы покрыть римские буквы, смещенные с отрицательным margin-left:

.foo li {
  list-style-type: decimal;
  padding-left: 20px;
}

.foo li ul li {
  list-style-type: lower-alpha;
  margin-left: -40px;
}
<article>
  <div>
    <ul class='foo'>
      <li>bar</li>
      <li>foo</li>
      <li>foo
        <ul>
          <li>very long test here so that it moves to a new line on the webpage</li>
        </ul>
      </li>
      <li>bar</li>
      <li>foo</li>
    </ul>
  </div>
</article>

Источник

Тег ul следует использовать только один раз, когда он должен выглядеть примерно так

    <ul>
    <li>Items</li>
    <li>Items</li>
    <li>Items</li>
    </ul>

вы продолжали повторять ваши теги ul и для пользовательской индексации вы могли бы использовать теги span вместо использования другого тега li

Источник
Другие вопросы по тегам