html - 段落编号对齐且位于 div 外部的 Div(参见草图)

Question

我需要在 CSS 中做到这一点

红框是<div>有几段<p>

我想让段落编号位于红色框的右侧，并且段落编号与相应 <p> 的顶部对齐

我可以只用 CSS 做这个布局吗？

到目前为止，我已经尝试使用 javascript 来执行此操作，记录每个段落元素的位置，然后将数字定位在相同的 y 坐标中。

谢谢

Answer 1

你可以做

<p style="position: relative;">
   <div style="width: 30px; position: absolute; top: 0; right: -30px">#1</div>
   Lorum ipsum...
</p>

您可能也想使用类，内联样式仅作为示例。

此外，一个有效的论点是使用有序列表。这很容易通过将那些 p 元素包装在 li 元素中来完成，而 li 元素又将被 ol 元素包装。请务必使用 ol { list-style: none; }，否则你会得到2组数字!

至于添加数字，您可以使用服务器端脚本和 DOM 解析器或使用 JavaScript

var p = document.getElementById('content').getElementsByTagName('p');

for (var i = 0; i < p.length; i++) {
    p[i].getElementsByTagName('div')[0].innerHtml = '#' + (i + 1);
}

当然你也可以用jQuery

$('#content p').each(function(i) {

    $(this).find('div:first').html('#' + (i + 1));

});