如何使用 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】:

您可以使用位置absolutefixed 来解决我们的问题。

.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 在侧边栏中制作目录?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 CSS 网格制作侧边栏和部分?

当使用 Tailwind CSS 单击按钮时,从屏幕左侧制作侧边栏滑动

如何在我的项目的每个刀片中包含的侧边栏中注入数据

在R闪亮中,如何在不使用renderUI的情况下首次调用应用程序时消除侧边栏中所有条件面板的闪烁?

如何在闪亮的仪表板侧边栏中的 menuItem 或固定框下创建 checkBoxGroup 项?

切换侧边栏时如何在导航栏中移动/动画文本值