[英]Bullet lists in sidenotes with HTML and CSS
I want to make a html document with sidenotes (margin notes).我想制作带有旁注(边注)的 html 文档。 I found a solution to make a floating frame at the right side of the main text with a specific CSS class in a
<span>
flag.我找到了一种解决方案,可以在正文右侧使用
<span>
标志中的特定 CSS class 制作浮动框架。 It works fine!它工作正常!
Now, I would like to include bullets lists in these side notes but then my bullet list appear in the main text and not in the sidenote.现在,我想在这些旁注中包含项目符号列表,但我的项目符号列表出现在正文中而不是旁注中。 See below:
见下文:
I also tried to display the span as a block but it didn't change anything.我还尝试将跨度显示为一个块,但它没有改变任何东西。 Here his my HTML code for this example:
这是我的 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>
I tried using a <div>
which give the correct result in the side note but not in the main text.我尝试使用
<div>
在旁注中给出正确的结果,但在正文中没有。 The line is breaking at "Donec accumsan" (like the paragraph style):该行在“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>
which give:这给了:
Do you have an idea how to modify my code to allow paragraphs, bullet lists and numbered lists in my sidenotes without breaking the line in the main text?您知道如何修改我的代码以允许在我的旁注中出现段落、项目符号列表和编号列表,而不会破坏正文中的行吗?
If not, is there another way to make side notes (margin notes)?如果没有,是否有另一种方法来制作旁注(边注)?
It doesn't really make sense to place your notes mid paragraph, let alone mid sentence.把你的笔记放在段落中间是没有意义的,更不用说在句子中间了。 If you want to provide a semantic link between content in the paragraph and the side not, use and actual
a
link.如果您想在段落中的内容和旁边
a
内容之间提供语义链接,请使用实际链接。
As I mentioned in a comment, you can not use ul
or div
mid p
tag as you may only use phrasing content in a p
tag.正如我在评论中提到的,您不能使用
ul
或div
mid p
标签,因为您只能在p
标签中使用短语内容。 Using any other block level element will cause the p
tag to close.使用任何其他块级元素将导致
p
标签关闭。 See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p请参阅: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p
I would go with placing the side notes after the paragraph they pertain to.我会 go 将旁注放在它们所属的段落之后。 Using the
:target
pseudo class we can add a high-lite to the appropriate footnote when the link is clicked使用
: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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.