Отступ <ul><li>

Question

У меня есть список предметов, и он займет две строки или более.

Когда он становится длиннее ширины div, он переносится на следующую строку, как в примере ниже.

Как сделать так, чтобы вторая строка начиналась с выравнивания по Item1 , и это можно сделать быстро?

ul li {
  display: inline-block;
}

<ul>
  <li><strong>List of items:</strong></li>
  <li><a href="#">Item1</a></li>
  <li><a href="#">Item2</a></li>
  <li><a href="#">Item3</a></li>
  <li><a href="#">Item4</a></li>
  <li><a href="#">Item5</a></li>
  <li><a href="#">Item6</a></li>
  <li><a href="#">Item7</a></li>
</ul>

Answer 1

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

Затем вы можете использовать flexbox на элементе-обертке для вертикального выравнивания его дочерних элементов (заголовок и неупорядоченный список).

.wrapper {
  display: flex;
  align-items: flex-start;
}

ul li {
  display: inline-block;
  margin-right: 0.5em;
}

h2, li {font-size: 16px}

h2 {flex-shrink: 0;}

h2, ul {margin: 0;}

ul {padding-left: 0.5em;}

<div class="wrapper">
  <h2>List of items:</h2>
  <ul>
    <li><a href="#">Item1</a></li><li><a href="#">Item2</a></li><li><a href="#">Item3</a></li><li><a href="#">Item4</a></li><li><a href="#">Item5</a></li><li><a href="#">Item6</a></li><li><a href="#">Item7</a></li><li><a href="#">Item8</a></li><li><a href="#">Item9</a></li><li><a href="#">Item10</a></li><li><a href="#">Item11</a></li><li><a href="#">Item12</a></li><li><a href="#">Item13</a></li>
  </ul>
</div>

Answer 2

Если текст в первом li не изменяется, это можно сделать с помощью отступа и отступа текста.

ul {
  text-indent: -94px;
  padding-left: 94px;
}

ul li{
  text-indent: 0;
  display:inline-block;
}

<ul>
  <li><strong>List of items:</strong></li>
  <li><a href="#">Item1</a></li>
  <li><a href="#">Item2</a></li>
  <li><a href="#">Item3</a></li>
  <li><a href="#">Item4</a></li>
  <li><a href="#">Item5</a></li>
  <li><a href="#">Item6</a></li>
  <li><a href="#">Item7</a></li>
</ul>

Answer 3

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

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

<div id="my-ul">
  <p>List of items:</p>

  <ul>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
  </ul>
</div>

#my-ul {
  display: flex;
}

#my-ul p {
  width: 200px;
}

#my-ul ul {
  list-style: none;
  padding: 0;
}

#my-ul ul li {
  display: inline;
}

Answer 4

Я надеюсь, что это отвечает на ваш запрос.

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.conteiner p {
  margin-left: 10px;
}

ul>li {
  display: inline-block;
}

<div class="container">
  <p><strong>List of items:</strong></p>
  <ul>
    <li><a href="#">Item1</a></li>
    <li><a href="#">Item2</a></li>
    <li><a href="#">Item3</a></li>
    <li><a href="#">Item4</a></li>
    <li><a href="#">Item5</a></li>
    <li><a href="#">Item6</a></li>
    <li><a href="#">Item7</a></li>
    <li><a href="#">Item8</a></li>
    <li><a href="#">Item5</a></li>
    <li><a href="#">Item6</a></li>
    <li><a href="#">Item7</a></li>
    <li><a href="#">Item8</a></li>
  </ul>
</div>