将日期和作者放在同一行，并在 - YAML 之后加一条水平线 HEADER

Question

我正试图在下方 header 之后插入一条水平线 (---)，但该线被放置在错误的位置，侵入了 header 区域。当我在 css 中添加浮动配置时，它就开始发生了。对正在发生的事情有什么建议吗？

---
title: "report"
author: "who cares"
date: "`r format(Sys.time(), '%d, %B, %Y')`"
output: html_notebook
---

<style type="text/css">

h1.title {
  font-size: 38px;
  color: DarkBlack;
  text-align: left;
}
h4.date { /* Header 4 - and the author and data headers use this too  */
  font-size: 18px;
  font-family: "Times New Roman", Times, serif;
  color: DarkBlack;
  float: right;
}

h4.author { /* Header 4 - and the author and data headers use this too  */
    font-size: 18px;
  font-family: "Times New Roman", Times, serif;
  color: DarkBlack;
  float: left;
}
</style>

---

Answer 1

这是浮动元素的 css 问题。

只需向包含的 header div 添加一个 clearfix，如下所示：

<style>
  [...]
  div#header {
    overflow: auto;
  }
</style>

（有关详细信息，请参阅 here）

更新：
根据 OP 的要求，完整代码为

---
title: "report"
author: "who cares"
date: "`r format(Sys.time(), '%d, %B, %Y')`"
output: html_notebook
---

<style type="text/css">

h1.title {
  font-size: 38px;
  color: DarkBlack;
  text-align: left;
}

h4.date { /* Header 4 - and the author and data headers use this too  */
  font-size: 18px;
  font-family: "Times New Roman", Times, serif;
  color: DarkBlack;
  float: right;
}

h4.author { /* Header 4 - and the author and data headers use this too  */
  font-size: 18px;
  font-family: "Times New Roman", Times, serif;
  color: DarkBlack;
  float: left;
}

div#header {
  overflow: auto;
}
</style>

---

将日期和作者放在同一行，并在 - YAML 之后加一条水平线 HEADER

Put date and author in the same line and an horizontal line right after - YAML HEADER

r

r-markdown

rnotebook