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

【问题标题】：Bullet lists in sidenotes with HTML and CSS带有 HTML 和 CSS 的旁注中的项目符号列表
【发布时间】：2019-10-07 21:25:49
【问题描述】：

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

给：

您知道如何修改我的代码以允许在我的旁注中出现段落、项目符号列表和编号列表，而不会破坏正文中的行吗？

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

【问题讨论】：

您使用<span class="sidenotes" style="display:block;"> 而不是<div class="sidenotes"> 是否有原因？ div 总是 display:block 除非被修改...
事实上，我之前用
做了一个测试，它打破了“Donec accumsan”的界限。这就是我尝试块显示的原因。
关于p 标签的注释。它只能包含短语元素，不包括div 或ul 标签。见developer.mozilla.org/en-US/docs/Web/HTML/Element/p。如果您的p 元素包含ul 或div（以及其他），则标签将自动关闭。

【解决方案1】：

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

正如我在评论中提到的，您不能使用 ul 或 div mid 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>

【讨论】：