我正在编写一个从高级文档到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似乎不起作用。
处理段落中的块元素的要求(这是重要的部分)是问题的根源。
无法在段落中嵌套块元素。
段落是块级元素，如果在结束</p>标记之前解析了另一个块级元素，则会自动关闭。例如，此 HTML：
<p>Before<div>Block</div>After</p>
结果在：
<p>Before</p>
<div>Block</div>
<p>After</p>
这会导致块元素周围的断裂。
唯一能达到你想要的结果的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>我的朋友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>尝试将display: inline-block添加到<span>的样式中...
请参阅：https://www.w3schools.com/cssref/pr_class_display.asp