Question

我正在编写从高级文档到HTML的编译器。基本上，我想要：

Because blah blah{{margin-note|...}}, it yada yada.

编译为以下段落：

Because blah blah¹, it yada yada.

，该段落的右侧浮动有一个框，与边注编号相同。

我解决此问题的方法是将其编译为以下HTML：

<p>
  Because blah blah<span class="mg-note-num">1</span><span class="mg-note-box">...</span>, it yada yada.
</p>

其中mg-note-box将元素移至段落的右侧。这非常有效，除了页边空白注释框不支持块级元素（例如ul）。当我将ul放在边注框内时，ul元素将被抛出到span标签之外。

显而易见的解决方法是将span更改为div，以便ul可以留在div内，但这不是一个选择，因为div不能留在p内。这样做会将段落分为两部分。代替：

Because blah blah¹, it yada yada.

我们会有这个

Because blah blah¹

, it yada yada.

我猜另一个选择是在编译器中有一个收集阶段，并将所有边距注释框移到段落外。这也是不可取的，因为对于较长的段落，边注栏的位置将不再与边注号匹配。

我应该如何处理？

更新：我应该提到我在inline-block上进行的实验也不起作用，但是也许我做错了。这是我所做的：

让我们从参考布局开始（该参考布局正常运行，但不支持块级元素）

<p>
  before
  <span style="float: right;">Hello world</span>
  after
</p>

这将导致

| before after             Hello world |

使用div和inline-block：

<p>
  before
  <div style="float: right; display: inline-block;">Hello world</div>
  after
</p>

结果是：

| before                        |
|                               |
| after             Hello world |

使用span和inline-block：

<p>
  before
  <span style="float: right; display: inline-block;">
    <ul><li>1</li></ul>
  </span>
  after
</p>

结果是：

| before                        |
|                               |
| - 1                           |
|                               |
| after                         |

因此，不，inline-block似乎不起作用。

Answer 1

处理段落中的块元素的要求（这是重要的部分）是问题的根源。

无法在段落中嵌套块元素。 Paragraphs是块级元素，如果解析了另一个块级元素，则自动关闭在结束</p>标记之前。例如，以下HTML：

<p>Before<div>Block</div>After</p>

导致：

<p>Before</p>
<div>Block</div>
<p>After</p>

导致block元素周围的中断。

唯一可以实现所需结果的HTML结构是使用内联元素，例如<span>（不带任何嵌套的块元素）。这是一个示例：

p {
  font-family: Arial;
  position: relative;
  padding-right: 120px;
}

.note-num {
  font-size: 10px;
  margin: 0 1px 0 -3px;
}

.note-content {
  position: absolute;
  right: 0;
  font-size: 12px;
  max-width: 100px;
}

<p>
  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.
  <sup class="note-num">1</sup>
  <span class="note-content">
    Inline Note
  </span>
  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.
</p>

但是......

我们可以通过一种方法来获得所需的结果，即使用<div>来代替包装<p>。像这样：

p,
.p {
  font-family: Arial;
  position: relative;
  padding-right: 120px;
}

.note-num {
  font-size: 10px;
  margin: 0 1px 0 -3px;
}

.note-content {
  position: absolute;
  right: 0;
  font-size: 12px;
  max-width: 100px;
}

.note-content ul {
  margin: 0;
  padding: 0;
}

<div class="p">
  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.
  <sup class="note-num">1</sup>
  <span class="note-content">
    <ul><li>Block Note</li></ul>
  </span>
  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.
</div>

Answer 2

我的朋友Pavel Panchekha发现了另一种无需将<p>更改为<div>的方法：使用<object>代替<span>：

p {
  font-family: Arial;
  position: relative;
  padding-right: 120px;
}

.note-num {
  font-size: 10px;
  margin: 0 1px 0 -3px;
}

.note-content {
  position: absolute;
  right: 0;
  font-size: 12px;
  max-width: 100px;
}

.note-content ul {
  margin: 0;
  padding: 0;
}

<p>
  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.
  <sup class="note-num">1</sup>
  <object class="note-content">
    <ul><li>Block Note</li></ul>
  </object>
  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.
</p>

Answer 3

尝试将display: inline-block添加到<span>的样式中...

请参阅：https://www.w3schools.com/cssref/pr_class_display.asp

在段落内浮动块级元素

3 个答案:

但是......