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

Question

当我将 Rmd 文件编成 html 时，我在浏览器上可视化的输出始终居中。 我怎样才能证明左边的一切都是合理的，所以没有浪费空间？ 浪费空间是指 TOC 左侧的空间未使用

编辑 我知道this thread 但我想保留目录，我真正想要的是将所有内容都移到左侧，因此目录位于左对齐的旁边

代码：

---                                                                        
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;
}

在编织/生成过程中，something 正在导入哪个，不确定是什么。

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

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

在与 Rmd 文件位于同一目录的名为“styles.css”的文件中。然后在你的 front-matter（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;
}