固定寬度跨度，無內聯塊

Question

我可能正在嘗試做一些不可能的事情； 我正在一個展示詩歌的網站上工作。 我希望詩意的線條都在左側有數字； 並妥善包裝詩歌（即有某種縮進）。 我已經實現了使用：

• 一個p ，既包含行號，又包含詩歌行的文本； 我將text-indent和padding-left應用於此類的段落來創建所需的縮進類型。
• 行號的span （以不同的方式設置樣式）；
• 詩線本身內容的span 。

這是我想要的方式（您可以在此處看到一個示例）， 除了當行號從一位數字轉換為兩位數時，它會顛倒詩歌行文本的縮進（請看鏈接中的第9行和第10行）例）。

最明顯（也是唯一的恐怕）的解決方案是使我的跨度在inline-block包含行號； 但這破壞了我想要的縮進行為。 如果我嘗試將padding-left / text-indent應用於詩歌行本身的文本，則意味着行號和line-text是單獨的塊，因此當換行時它們不會保持在一起（將行號單獨留在一行上）。 有沒有一種方法可以使用HTML和CSS實現我想要的（行號正確對齊而不破壞所需的縮進行為）？ 我願意進行結構重組，但希望避免使用一整套JS。 （在我寫這篇文章時，它發生在我身上：我可以在一位數字后插入一個不間斷的空格嗎？）

非常感謝。

Answer 1

為此，您可能最好利用有序列表，並將樣式應用於其中的元素：

看看： http : //jsfiddle.net/oohyrxz9/

HTML（帶占位符）：

<ol id="poetry">
    <li>
        <p class="poetic-line">About me young and careless feet</p>
    </li>
    <li>
        <p class="poetic-line">Linger along the garish street;</p>
    </li>
    <li>
        <p class="poetic-line indent1">Above, a hundred shouting signs</p>
    </li>
    <li>
        <p class="poetic-line">Shed down their bright fantastic glow</p>
    </li>
    <li>
        <p class="poetic-line indent1">Upon the merry crowd and lines</p>
    </li>
    <li>
        <p class="poetic-line">Of moving carriages below</p>
    </li>
    <li>
        <p class="poetic-line">Oh wonderful is Broadway—only</p>
    </li>
    <li>
        <p class="poetic-line">My heart, my heart is lonely.</p>
    </li>
    <li>
        <p class="poetic-line">Desire naked, linked with Passion,</p>
    </li>
    <li>
        <p class="poetic-line">Goes strutting by in brazen fashion;</p>
    </li>
    <li>
        <p class="poetic-line indent1">From playhouse, cabaret and inn</p>
    </li>
</ol>

然后是CSS（您可以在其中應用自定義類）：

ul#poetry li {
    padding-right: 1em; 
}

#poetry > li > p {
   margin: 0 auto; 
}

p.indent1 {
    margin-left: 1em !important;
}

Answer 2

就像建議的使用有序列表的替代方法一樣，經常會發生這樣的情況，即我們希望布局中帶有圖像，或者在此示例中，其左側是行號，而右側則沒有換行。 因為您需要數字，所以此處的排序列表很有意義。 但這將是使用內聯塊的替代方法。

<p class="poetry">
    <span class="line">1.</span>
    <span class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</span>
</p>

和CSS：

.line {
    display: inline-block;
    vertical-align: top;
    width: 25px;
}

.text {
    display:inline-block;
    width: 90%;
}

小提琴