我是 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 对象数字有关。
如何保持我自己的列表编号，但控制多行缩进的一致性？
您可以将列表呈现为表格：
ul.foo {
display: table;
}
ul.foo > li {
display: table-cell;
}
ul.foo > li.num {
min-width: 40px;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句