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

- Organic Heart

---

我认为这可能不太可能，除非你使用一些宽度计算并渲染它，或者使其始终具有固定数量的项目，或者简单地使用表格，将标题移动到一列中，数据移动到另一列中。 - Dipen Shah

如果你把 List of items: 移到列表外面，我认为你会发现问题更容易解决（并且解决方案更语义化）。 - stealththeninja

你可以使用2个div，一个用于第一个li，另一个用于所有其他项。然后你可以设置宽度，它们将在相关的div中自动调整。 - Nasser Ali Karimi

从语义上讲，您的第一个“列表项”是一个标题，而不是列表的一部分。这应该是一个完全独立的元素，并可以解决这个问题。 - Rob

只需使用<table>标签。第一个单元格将是文本“项目行”。第二个单元格将是列表项。 - AskYous

不，请不要使用 <table>。 - ksav

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>

- ksav

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>

- Chris Li

---

如果第一行的文本不变，这是一个非常不牢靠的假设。那么如果使用不同的字体、i18n（国际化）呢？ - stealththeninja

@ChrisLi 谢谢，但在我的情况下，单词长度不是固定的。 - Organic Heart

Answer 3

希望这能回答您的问题。

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

- Abhishek Pakhare

Answer 4

“List of items”这个文本在语境上不是你的无序列表的内容。从语义上讲，如果你想要更干净的HTML，我不建议你采用这种方式。

我建议只需保留ul来列出必须列出的内容，没有其他标题或介绍。

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

- user12603016