如何在不影响兄弟内联元素的情况下将内联元素定位在元素外部

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 跨度的边距正在对受影响的行产生 push-in 效果。我试过 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%;
}

这样做的原因是：我的数据模型由单独的书行组成。行号对于应用程序的操作很重要，因此需要按照它们在数据中表示的方式进行布局。我没有找到调整文本和保持中断的方法（如果我不使用这个 hack 和调整我的文本，这些行将聚集：下一行的部分内容将被带到当前行以填写文本）。

另请注意，行号本身与实际文本相对应。我不能使用计数器，因为行号会在一章中重置。我正在使用 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>

希望对您有所帮助！

如何在不影响兄弟内联元素的情况下将内联元素定位在元素外部

How to position an inline element outside of an element without affecting a sibling inline element

html

css

css-position

澄清