HTML5中可替代水平线标签`<hr>`的方法是什么？

Question

我目前正在为一个日历（使用HTML5）编写一些HTML，并尝试添加彩色的水平线。我一直在使用水平线标签<hr>，但我很难让大多数属性正常工作。

这是我想要的：

<hr color="purple" align="left" width="120%" size="6">

我读到有些属性在HTML5中不起作用...唯一起作用的只有width标签，其他的都没有效果！

我该怎么让它们能够起作用呢？有更好的解决方案吗？

- Ruth Young

---

使用CSS，而不是HTML属性。 - Turnip

Answer 1

使用CSS规则

hr.someClass {
  background-color: purple;
  width: 120%;
  height: 12px;
  border-top: 1px solid black
}

<hr class="someClass">

- Satpal

---

简单的问题，但我需要去掉左右两侧的间隙...就像每一侧都是零边距。有什么想法吗？ - Ruth Young

@RuthYoung 这里的空格是由于 body 元素的内边距造成的 - 在你的 CSS 中添加 body { padding-left: 0; } 可以修复这个示例，并可能对你也有用。 - CalvT

Answer 2

您可以添加一个带有 border-top 的 div，如下所示：

<div style="border-top: 6px solid purple"></div>

使用外部样式表（这总是更好的）：

.horizontal-rule {
  border-top: 6px solid purple;
}

<div class="horizontal-rule"></div>

- CalvT

---

为什么OP不能使用<hr>？为什么/如何使用<div>更合适？ - Turnip

不是这样的。应该是“为什么属性没有被应用”。 - Turnip

@Turnip 好的，问题说明OP在使用<hr>时遇到了困难，所以我提供了一个替代方案。 - CalvT

这样做有什么更好的呢？ - Turnip

@Turnip 因为使用 CSS 可以以几乎任何方式操纵 div，而 hr 则不行。 - CalvT

Answer 3

在HTML 4.01中，<hr>标签表示水平线。在HTML5中，<hr>标签定义了主题分隔符。而像align、size和width这样的属性在HTML5中不受支持。

正确的替代方法是将一个div定义为：

<div class="hr"></div>

CSS

.hr {
    border-top: 6px solid purple;
    width: 120%;
}

- Tariq B.

Answer 4

你可以使用

标签

。

<div style="background-color: purple; text-align: left; width: 120%; height: 6px;"></div>

在这里，您可以给“hr”线条设置“background-color”并将高度设置为边框高度。我希望这会起作用 :)

- Akshay Kumar