如何获得第二行（第三行等）的缩进，以使用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> 

如果要使文本“完全” margin-left: -8px ，则需要在编号中带有附加字母的元素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> 

Answer 2

您可以将列表呈现为表格：

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