带有段落的 Div，段落编号对齐并位于 div 外部（参见草图）

我需要在 CSS 中执行此操作

红色框是一个<div>有几个段落<p>

我想要将段落编号放在红色框的右侧，并且段落编号与相应的顶部对齐<p>

我可以只使用 CSS 来实现此布局吗？

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

Thanks

你可以做

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

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

此外，一个有效的论点是使用有序列表。这很容易通过包裹那些来完成p中的元素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));

});