如何使用 CSS 在侧边栏中制作目录?
Posted
技术标签:
【中文标题】如何使用 CSS 在侧边栏中制作目录?【英文标题】:How to make table of contents in sidebar using CSS? 【发布时间】:2021-12-15 01:44:47 【问题描述】:我想制作一个带有侧边栏目录 (TOC) 的网页,如下所示:
https://bookdown.org/yihui/bookdown/html.html
目录目前以这种方式位于 HTML 页面的顶部:
<h2>Table of Contents</h2>
<div id="text-table-of-contents">
<ul style="list-style-type:none">
...
<li><a href="#orgbdecee3">Topic 1</a></li>
</ul>
</div>
如何创建 CSS 文件以使这样的 TOC 显示为侧边栏?
【问题讨论】:
到目前为止你尝试过什么? *** 不是免费的编码服务。您应该先尽最大努力自己解决问题。然后,如果你失败了,请在网上搜索它可能失败的原因。如果您已经完成了所有这些但仍然没有成功,请回到这里,展示您的最佳尝试,解释它是如何失败的以及您的期望。 你试过给它一个css类.work-as-I-want position: ideal; all-browsers-and-resolutions: yes;
吗?
【参考方案1】:
您可以使用位置absolute
和fixed
来解决我们的问题。
.grid
position:relative;
width:100%;
height:100vh;
color:#fff;
.one
position:fixed;
top:0;
left:0;
bottom:0;
width:25%;
background:#333;
.two
position:absolute;
top:0;
left:25%;
bottom:0;
width:75%;
background:#999;
height:120%;
<div class="grid">
<div class="one">aaa</div>
<div class="two">aaa</div>
</div>
【讨论】:
以上是关于如何使用 CSS 在侧边栏中制作目录?的主要内容,如果未能解决你的问题,请参考以下文章
当使用 Tailwind CSS 单击按钮时,从屏幕左侧制作侧边栏滑动
在R闪亮中,如何在不使用renderUI的情况下首次调用应用程序时消除侧边栏中所有条件面板的闪烁?