javascript - 固定宽度跨度，无内联 block

Question

我可能正在尝试做一些不可能的事情；我正在一个展示诗歌的网站上工作。我希望诗行的左边都有数字；并为诗歌正确包装(即有一种悬挂缩进)。我已经实现了使用:

• a p 包含行号和诗歌行的文本；我使用应用于此类的段落的 text-indent 和 padding-left 来创建我需要的缩进类型。
• 行号的 span(以不同的方式设计)；
• 一个 span 诗行本身的内容。

它按照我想要的方式工作(你可以看到一个例子 here )，除了当行号从一位数转换为两位数时，它会改变行文本的缩进诗歌(查看链接示例中的第 9 行和第 10 行)。

最明显的(我担心也是唯一的)解决方案是让我的跨度包含 inline-block 中的行号；但这打破了我想要的缩进行为。如果我尝试将 padding-left/text-indent 应用于诗行本身的文本，这意味着行号和行文本是单独的 block ，因此当换行时它们不会保持在一起(将行号单独留在一行上)。有没有办法使用 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;
}