css - asciidoctor 增加 toc 宽度

标签 css asciidoctor

我正在重写 AssertJ 的文档在 asciidoc 中,我想增加目录的宽度和内容的整体宽度(以填充空白区域)

我查看了 asciidoctor.css,发现我可以将该属性从 toc2 宽度从 20 增加到 25em,但它会弄乱

  #toc.toc2 {
    /* initially 20em */
    width: 25em
  }

  #header,
  #content,
  #footnotes,
  #footer {
  width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    /* initially 75em,  increasing it to 100em does not play with toc when toc is increased */
    max-width: 100em;
    *zoom: 1;
    position: sticky;
    padding-left: .9375em;
    padding-right: .9375em
  }

我很高兴这是新的目录宽度,但问题是,当缩小窗口时,内容被目录隐藏,如屏幕截图所示:(

我不是网络开发人员,我尝试了一些方法但没有成功,可以帮助我正确设置或指出良好的资源吗?

enter image description here

最佳答案

您需要在两个地方更改 css。

body.toc2 {
   padding-left: 26em;
}

#toc.toc2 {
    /* initially 20em */
    width: 25em;
}

正文的宽度将比您想要的宽度多 1em

结果

Results

关于css - asciidoctor 增加 toc 宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57074547/

相关文章:

html - 允许图像覆盖屏幕上所有内容的 CSS 动画

javascript - jQuery 中的 siblings() 不起作用

internet-explorer - IE7 和 IE8 的边框半径

asciidoc - 如何为现有 Asciidoctor Asciidoc 宏创建自定义 HTML 输出?

html - 如何将带有站点导航的通用页眉添加到 asciidoc 文档?

maven - AsciiDoctor 表格单元格中的多个段落

documentation - MkDocs:使用变量构建外部 URL

css - 如何更改文本字段中箭头的颜色从material-ui中选择

javascript - 如何正确显示表格排序向上/向下箭头?

java - 尝试获取包括使用 AsciiDoc Java 接口(interface)