Question

我可能会尝试做一些不可能的事情;我正在一个展示诗歌的网站上工作。我想要诗意的线条，左边都有数字;并适当地包装诗歌（也就是说，有一些悬挂缩进）。我已经实现了这个：

一个p，其中包含诗行的行号和文字;我使用text-indent和padding-left应用于此类的段落来创建我需要的缩进类型。
行号的span（以不同方式设置样式）;
a span了解诗歌本身的内容。

它的工作方式与我想要的方式（你可以看到一个例子here），除了当行号从单个数字转换为两位数时，它会突破文本的缩进诗歌的界限（见链接例子中的第9行和第10行）。

最明显的（也是我唯一的）解决方案是让我的跨度包含inline-block中的行号;但这打破了我想要的缩进行为。如果我尝试将padding-left / text-indent应用到诗歌本身的文本上，这意味着行号和行文本是单独的块，因此它们不会停留当换行时（将行号留在一行上）。有没有办法实现我想要的（行号正确对齐而不破坏所需的缩进行为）使用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%;
}

<强> fiddle

固定宽度跨度，没有内联块

2 个答案: