html - HTML和CSS旁注中的元素符号列表

我想制作带有注解（边注）的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>

给出：



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

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

最佳答案

将笔记放在段落中间并没有任何意义，更不用说在句子中间了。如果您不想在段落的内容和侧面之间提供语义链接，请使用实际的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>