如何獲得第二行（第三行等）的縮進，以使用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標簽