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

Question

我想制作带有旁注（边注）的 html 文档。 我找到了一种解决方案，可以在正文右侧使用<span>标志中的特定 CSS class 制作浮动框架。 它工作正常！

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

我还尝试将跨度显示为一个块，但它没有改变任何东西。 这是我的 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 mid p标签，因为您只能在p标签中使用短语内容。 使用任何其他块级元素将导致p标签关闭。 请参阅： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p

我会 go 将旁注放在它们所属的段落之后。 使用:target伪 class 我们可以在单击链接时在适当的脚注中添加一个高亮

 .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>