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

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

0 голосов
/ 23 октября 2018

Я новичок в 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 ]

0 голосов
/ 23 октября 2018

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

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

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

0 голосов
/ 23 октября 2018
Тег

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

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

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

0 голосов
/ 23 октября 2018

Самый простой способ предотвратить это - просто дать элемент списка 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>
...