带有HTML和CSS的旁注中的项目符号列表

Question

我想制作一个带有注解（边注）的html文档。我找到了一种解决方案，可以在<span>标志中使用特定的CSS类在正文的右侧制作一个浮动框。效果很好！

现在，我想在这些旁注中包括项目符号列表，但是我的项目符号列表会出现在正文中，而不是出现在旁注中。见下文：

我还尝试将跨度显示为一个块，但没有任何改变。这是他的这个示例的HTML代码：

body {
  margin-right: 400px
}

.sidenotes {
  float: right;
  clear: right;
  margin-top: 0;
  margin-bottom: 0;
  background: #558844;
  vertical-align: baseline;
  position: relative;
  border: solid black 1pt;
  width: 200px;
  display: block;
  margin-right: -250px;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent suscipit eros ut ullamcorper vestibulum.
  <span class="sidenotes" style="display:block;">aaaa aaa aaa aa aaa aaa aaaa
    aaa aaa aaa aa aaa aaa aa aa aa aaaa aaaaa aaa aaa </span> tempor, tempor tellus vel, feugiat tellus. Mauris facilisis eget felis ut mattis. Suspendisse nec .
  <p>
    <p>Donec accumsan,
      <span class="sidenotes" style="display:block;">bbbb b bb bbbb bbb bbb bbb bbb b
    <ul>
    <li><p >cccccc ccccccccc cccc</p></li>
    <li><p >ddd dddd ddd ddd ddd d</p></li>
    </ul></span> augue non pharetra imperdiet, nisi urna aliquam lorem, nec vulputate mi ipsum vel risus. Ut vel urna ut ipsum bibendum tempor ut id massa. Sed id ante risus. </p>

我尝试使用<div>，该注释在旁注中给出了正确的结果，但在正文中未给出正确的结果。该行在“ Donec accumsan”处中断（如段落样式）：

<p style="font-style:italic;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent suscipit 
eros ut ullamcorper vestibulum.
<span class="sidenotes">aaaa aaa aaa aa aaa aaa aaaa
aaa aaa aaa aa aaa aaa aa aa aa aaaa aaaaa aaa aaa</span> 
tempor, tempor tellus vel, feugiat tellus. Mauris facilisis eget felis 
ut mattis. Suspendisse nec .<p>
<p style="font-style:italic;">Donec accumsan, 
  <div class="sidenotes" ><p>bbbb b bb bbbb bbb bbb bbb bbb b</p>
    <ul>
      <li><p >cccccc ccccccccc cccc</p></li>
      <li><p >ddd dddd ddd ddd ddd d</p></li>
    </ul>
  </div> augue non pharetra imperdiet, nisi urna aliquam lorem, 
nec vulputate mi ipsum vel risus. Ut vel urna ut ipsum bibendum tempor ut 
id massa. Sed id ante risus.  </p>

给出：

您有一个主意，如何修改我的代码以允许在我的旁注中使用段落，项目符号列表和编号列表，而又不会在正文中出现断行？

如果没有，还有其他方法可以做旁注（边注）？

Answer 1

将笔记放在段落中间并没有什么意义，更不用说在句子中间了。如果您不想在段落的内容和侧面之间提供语义链接，请使用实际的a链接。

[正如我在评论中提到的，您不能在ul中间使用div或p标记，因为您只能在p标记中使用短语内容。使用任何其他块级元素将导致p标签关闭。请参阅：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p

我将附带说明放在相关段落之后。使用:target伪类，当单击链接时，我们可以在适当的脚注中添加高亮显示]

.sidenotes  {float:right; clear:right; background-color:#CCFFCC; width: 200px;}
.sidenotes:target{border:1px solid red;}
<div class="sidenotes" id="sidenote-a">aaaa aaa aaa aa aaa aaa aaaa
aaa aaa aaa aa aaa aaa aa aa aa aaaa aaaaa aaa aaa</div> 
<p style="font-style:italic;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent suscipit 
eros ut ullamcorper <a href="#sidenote-a">vestibulum</a>.

tempor, tempor tellus vel, feugiat tellus. Mauris facilisis eget felis 
ut mattis. Suspendisse nec .<p>


 <div class="sidenotes" id="sidenote-b" ><p>bbbb b bb bbbb bbb bbb bbb bbb b</p>
    <ul>
      <li><p >cccccc ccccccccc cccc</p></li>
      <li><p >ddd dddd ddd ddd ddd d</p></li>
    </ul>
  </div>
<p style="font-style:italic;">Donec <a href="#sidenote-b">accumsan</a>, 
  augue non pharetra imperdiet, nisi urna aliquam lorem, 
nec vulputate mi ipsum vel risus. Ut vel urna ut ipsum bibendum tempor ut 
id massa. Sed id ante risus.  </p>