如何使用 CSS 获取第二行（第三行等）行缩进以匹配具有自定义编号的列表中的第一行？

Question

我是 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 一样，当它向下移动到新行时，它会丢失所有缩进。此外，如果一个数字比另一个长，则其右侧的文本会额外缩进相同的量，但我希望每一行文本的开头与其上方和下方的文本一致。

我试过左右浮动每个列表，但这破坏了我在页面上的格式。我确信有一些简单的方法可以克服这个问题，但我所做的任何搜索都与 ol 对象的自动生成数字有关。

如何保留自己的列表编号，同时控制多行缩进的一致性？

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

如果你想得到行中的文本 'fully'，你需要将 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>

说了这么多，'best' 处理这个问题的方法是只使用一个 <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>

Answer 2

您可以将列表呈现为 table:

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

演示：http://jsfiddle.net/xbsp30kd/1/

Answer 3

ul 标签只能使用一次应该是这样的

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

你一直在重复你的 ul 标签，对于自定义索引，你可以使用 span 标签而不是使用另一个 li 标签

如何使用 CSS 获取第二行（第三行等）行缩进以匹配具有自定义编号的列表中的第一行？

How can I get second (third, etc.) line indentation to match first line in a list with custom numbering using CSS?

html

javascript

css

list

text-indent