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

把你的笔记放在段落中间没有任何意义，更不用说放在句子中间了。如果您想在段落中的内容和旁边的内容之间提供语义 link，请使用实际的 a link。

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

我会把旁注放在它们所属的段落之后。使用 :target 伪 class 我们可以在单击 link 时向适当的脚注添加高精简版

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

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

Bullet lists in sidenotes with HTML and CSS

html

css

footnotes

floating