添加CSS属性后不显示水平规则[重复]答案

【问题标题】：Horizontal Rule not displaying once CSS attributes added [duplicate]添加CSS属性后不显示水平规则[重复]
【发布时间】：2021-04-13 13:06:21
【问题描述】：

在我更改其职业属性之前，HR 显示得非常好。目的是将基本的黑线更改为不同的颜色和大小。没有错误消息，并且在 Chrome 开发工具中检查后，水平规则正在加载，但未显示。我已经更改了 Chrome Dev 和 IDE 中的属性，但没有成功。它应该显示一个厚红色的 HR。

body {
  margin: 0;
  text-align: center;
  font-family: serif;
}

h1 {
  margin-top: center;
  font-family: cursive;
}

h2 {
  margin-top: center;
  font-family: sans-serif;
}

h3 {
  margin-top: center;
  font-family: sans-serif;
}

hr {
  border: 10px red;
  border-radius: 3px;
}

p {
  font-family: sans-serif;
}

<div class="class1">
  <h2>Header 2</h2>
  <div class="class1-row">
    <h3>Lorem ipsum dolor sit amet.</h3>
    <p>Lorem ipsum dolor sit amet, mauris sed consectetuer. Etiam et eu.</p>
  </div>

  <hr>

  <div class="class2">
    <h3>Lorem Ipsum Dolor</h3>
    <p>Lorem ipsum dolor sit amet, mauris sed consectetuer. Etiam et eu, biben</p>
  </div>

【问题讨论】：

您使用了简写的border 属性，但省略了样式部分，这使其默认为无
你只是错过了边框样式，使用纯色，就像我在答案中提到的那样

标签： html css horizontal-line

【解决方案1】：

添加一些边框样式：

hr{
  border: 10px solid red;
  border-radius: 3px;
}

【讨论】：

工作就像一个魅力！我能找到的文档没有用，但是一个快速的 StackOverflow 问题和我的网站又恢复了漂亮。谢谢！
如果我的回答对你有帮助,,,, 请点击我回答左边的勾号图标接受它欢迎你我的朋友:)
我为他点击... x)
谢谢！还没有 Stackoverflow 代表。
哦，我明白了！让我给你一些声誉:) 享受伴侣！

【解决方案2】：

将solid 添加到您的边框：

border: 5px solid red;

body {
  margin: 0;
  text-align: center;
  font-family: serif;
}

h1 {
  margin-top: center;
  font-family: cursive;
}

h2 {
  margin-top: center;
  font-family: sans-serif;
}

h3 {
  margin-top: center;
  font-family: sans-serif;
}

hr {
  border: 10px solid red;
  border-radius: 3px;
}

p {
  font-family: sans-serif;
}

<div class="class1">
  <h2>Header 2</h2>
  <div class="class1-row">
    <h3>Lorem ipsum dolor sit amet.</h3>
    <p>Lorem ipsum dolor sit amet, mauris sed consectetuer. Etiam et eu.</p>
  </div>

  <hr>

  <div class="class2">
    <h3>Lorem Ipsum Dolor</h3>
    <p>Lorem ipsum dolor sit amet, mauris sed consectetuer. Etiam et eu, biben</p>
  </div>

【讨论】：

你抄我的答案！
错了——我的答案比你的早 2 分钟.. 看看时间戳。
@Zak：Zak 你是对的吗？和纳撒尼尔请长大，伙计：）为什么有人要复制东西：）

【解决方案3】：

添加solid属性：

body {
  margin: 0;
  text-align: center;
  font-family: serif;
}

h1 {
  margin-top: center;
  font-family: cursive;
}

h2 {
  margin-top: center;
  font-family: sans-serif;
}

h3 {
  margin-top: center;
  font-family: sans-serif;
}

hr {
  border: 10px solid red; /* solid attributes */
  border-radius: 3px;
}

p {
  font-family: sans-serif;
}

<div class="class1">
  <h2>Header 2</h2>
  <div class="class1-row">
    <h3>Lorem ipsum dolor sit amet.</h3>
    <p>Lorem ipsum dolor sit amet, mauris sed consectetuer. Etiam et eu.</p>
  </div>

  <hr>

  <div class="class2">
    <h3>Lorem Ipsum Dolor</h3>
    <p>Lorem ipsum dolor sit amet, mauris sed consectetuer. Etiam et eu, biben</p>
  </div>

【讨论】：

我提前 1 分钟以同样的方式回答了 ..
@Zak: 正确:)
好的对不起...