为什么我的HR会这样做

Question

我不确定为什么我的HR标签会这样做，你知道为什么

基本上这就是它正在做的事情

请参阅注销旁边的行，为什么会出现？

echo "<hr><h1>" . $row['blogTitle'] . "</hr></h1>";

CSS：

hr {
  margin: 20px 0;
  border: 0;
  border-top: 1px solid #666;
  border-bottom: 1px solid #ffffff;
}

Answer 1

<hr />是一个没有子节点的自闭元素，它代表一个水平规则。鉴于CSS允许任何元素具有边界，它在很大程度上是表现性的并且使用有限。

删除<hr>和</hr>的所有提及，而是使用CSS为<h1> border:提供border-bottom或border-top

如果您只想要边框来分隔元素，则可以使用h1:first-child来阻止第一个<h1>拥有边框。