0

我想制作一个带有旁注（边注）的 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>在旁注中给出正确结果但在正文中没有给出正确结果的 a 。该行在“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>

这给了：

在此处输入图像描述

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

如果没有，是否有另一种方法来制作旁注（边注）？

4

1 回答 1

1

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

正如我在评论中提到的，您不能使用ulor divmidp标签，因为您只能在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>

于 2019-10-07T22:54:00.903 回答