如何将 Rmd 文件的 html 输出对齐到左侧

Question

当我将 Rmd 文件编织为 html 时，我在浏览器上可视化的输出始终居中。我怎样才能证明左边的所有东西都是合理的，这样就不会有浪费的空间？浪费的空间是指 TOC 左侧有未使用的空间

编辑我知道这个线程，但我想保留 TOC，我真正想要的是将所有内容都向左移动，这样 TOC 就在左对齐的旁边

代码：

---                                                                        
title: "Example SO"                                                        
output:                                                                    
  html_document:                                                           
    toc: true                                                              
    number_sections: true                                                  
    code_folding: "hide"                                                   
    toc_float:                                                             
      collapse: false                                                      
      smooth_scroll: false                                                 
---                                                                        

```{r setup, echo=FALSE}                                                   
knitr::opts_chunk$set(error = TRUE,                                        
                      echo = TRUE,                                         
                      message = FALSE,                                     
                      comment = "",                                        
                      fig.align = "left"                                   
                      )                                                    
```                                                                        

# H1 Stuff                                                                 

```{r, DT}                                                                 
    DT::datatable(mtcars, rownames = FALSE, options = list(pageLength = 2))
```                                                                        

# H2 More stuff                                                            
Bla 

输出：

Answer 1

您看到“居中”行为的原因是 CSS，特别是规则：

div.main-container {
    max-width: 1200px;
}

这是由编织/生成过程中的某些东西导入的，不确定是什么。

但是 Rmd 允许您添加自己的 CSS 规则。因此，您可以利用CSS 的 !important使用此规则覆盖有问题的规则：

div.main-container {
  max-width: 100% !important;
}

在与 Rmd 文件位于同一目录中的名为“styles.css”的文件中。然后在您的前端（YAML 标头）中引用 CSS 文件：

title: "Example SO"                                                        
output:                                                                    
  html_document:                                                           
    toc: true                                                              
    number_sections: true                                                  
    code_folding: "hide"                                                   
    toc_float:                                                             
      collapse: false                                                      
      smooth_scroll: false
    css: styles.css 

您将获得内容一直移动到浏览器左边缘的结果。

这是满足您“不浪费空间”要求的一种途径，但如果您真的想要左对齐但宽度固定的内容，还有很多其他途径。

如果你想“吸收 TOC 表和内容块之间的空间，你可以将它添加到 'style.css'

.tocify {
  max-width: 100% !important;
}
.toc-content {
  padding-left: 10px !important;
}