如何在不影响同级内联元素的情况下将内联元素放置在元素外部

Question

请查看底部的说明

我正在尝试将行号添加到特别布置的文本中（使用我发现的here颇为古怪的方法是合理的）。

以下是html的示例：

<paragraph class="fl">
    ...
    <line class="l" id="4">
    being bound down the river, the only thing for it was to come to and wait
    </line>

    <span class="linenum">5</span>
    <line class="ll" id="5">
    for the turn of the tide.
    </line>
</paragraph>

<paragraph class="fl">
    <line class="fl" id="6">
    The sea-reach of the Thames stretched before us like the beginning of an
    </line>
    ...
    <line class="l" id="9">
    barges drifting up with the tide seemed to stand still in red clusters of
    </line>

    <span class="linenum">10</span>
    <line class="l" id="10">
    canvas sharply peaked, with gleams of varnished sprits. A haze rested on
    </line>
    ...
</paragraph>

我最初是通过Open Source Shakespeare抄写得到行号样式的：

.linenum {
    font-family: Playfair Display, serif;
    font-size: 0.7em;
    position: absolute;
    padding-left: 50px;
    left: 500px;
    font-weight: bold;
}

但是绝对定位对我来说不起作用：我的内容位于页面的中心，随着页面调整大小，绝对定位与内容发生冲突。

因此，我尝试相对定位，取消填充并切换到右侧，而不是向左定位以播放文本：

.linenum {
    font-family: Playfair Display, serif;
    font-size: 0.7em;
    position: relative;
    right: 50px;
    font-weight: bold;
}

但这会产生

如您在图片中所见，linenum跨度的边距在受影响的行上产生了推入效果。我尝试过z-index: -1;和z-index: 1;，但似乎没有任何结果。

有人有建议吗？

澄清

我的“ hack”是我如何单行证明自己的理由。

表格有几套样式

line.fl {
    line-height: 1.5em;
    margin: 0px;
    text-align: justify;
    text-indent: 1em;
}
line.fl:after {
    content: "";
    display: inline-block;
    width: 100%;
}

因此，其原因是：我的数据模型由几行书组成。行号对于应用程序的操作很重要，因此，在显示数据时必须对其进行布局。我没有找到证明文本并保持中断的方法（如果我不使用此技巧来证明我的文本，行将聚类：下一行的部分将被带到当前行以填充文本）。 / p>

还请注意，行号本身与实际文本相对应。我不能使用计数器，因为这样一来行号就会重置。我正在使用jinja2并因此在for-each循环中生成它们：

{% if line.l_num % 5 == 0 %}
    <span class="linenum">{{ line.l_num }}</span>
{% endif %}
<line class="{{ line.l_class.l_class }}" id="{{ line.l_num }}">
{{ line.line|safe }}
</line>

我更新了标题，使其更加清晰。对不起，我感到困惑。这个问题是关于定位的。

Answer 1

哇，你不必为此使用“ hacky”解决方案。
您可以使用不错的CSS counter来达到目的。
运行以下代码段：

请注意，我使用了标准HTML标记，但是它也可以与您的自定义标记一起使用。

body {
  counter-reset: i;
  background: #fdf6e3;
}

p {
  padding-left: 5em;
  font: 400 1em/1.3 'Playfair Display', serif;
  color: rgba(0, 0, 0, .75);
}

span {
  display: block;
}

span:nth-of-type(5n)::before {
  counter-increment: i 5;
  content: counter(i);
  float: left;
  width: 4em;
  margin: 0 0 0 -6em;
  text-align: right;
  font-size: .7em;
  font-weight:600;
  line-height: 2;
}

<p>
  <span>one -- being bound down the river,</span>
  <span>two -- being bound down the river,</span>
  <span>three -- being bound down the river,</span>
  <span>four -- the only thing for it was to come to and wait</span>
  <span>five -- for the turn of the tide.</span>
</p>

<p>
  <span>six -- being bound down the river,</span>
  <span>seven -- being bound down the river,</span>
  <span>eight -- being bound down the river,</span>
  <span>nine -- the only thing for it was to come to and wait</span>
  <span>ten -- for the turn of the tide.</span>
  <span>eleven -- for the turn of the tide.</span>
  <span>twelve -- for the turn of the tide.</span>
</p>

希望有帮助！