如何设置html横线_HTML横线（hr标签/CSS border）设置方法-html教程-PHP中文网

如何设置html横线_HTML横线（hr标签/CSS border）设置方法

蓮花仙者

发布： 2025-10-31 11:42:02

原创

624人浏览过

使用hr标签可快速插入默认横线，通过CSS border属性能自定义线条样式；结合CSS还可修改hr外观，实现多样化分隔线效果。

如何设置html横线_html横线（hr标签/css border）设置方法

在HTML中设置横线，常用的方法有两种：使用 hr标签 和通过 CSS border属性 自定义线条。两种方式各有用途，适合不同场景。

1. 使用 hr 标签添加默认横线

hr 是 HTML 中专门用于表示主题分隔的水平线标签，使用简单，无需额外样式即可显示一条横线。

示例代码：

<hr>

登录后复制

浏览器会自动渲染一条灰色、宽度占满父容器、有一定高度的横线。你可以直接插入到段落之间作为内容分隔。

2. 用 CSS border 自定义横线样式

如果想更灵活地控制颜色、粗细、对齐或线型（如虚线），推荐使用CSS的 border 属性。

立即学习“前端免费学习笔记（深入）”；

常见做法是给一个 div 或 hr 添加下边框模拟横线。

美图设计室

5分钟在线高效完成平面设计，AI帮你做设计

查看详情

示例代码：

<div class="line"></div>
<p><style>
.line {
height: 0;
border-bottom: 1px dashed #ccc;
margin: 20px 0;
}
</style>

登录后复制

这种方式可以实现实线、虚线、双线等效果，也能精确控制上下边距和宽度。

3. 调整 hr 的样式（结合CSS）

虽然 hr 标签自带样式，但可以通过CSS重新定义其外观。

示例：修改 hr 颜色、高度和宽度

<style>
hr {
  border: none;           /* 去除默认边框 */
  height: 2px;            /* 设置高度 */
  background-color: #000; /* 设置颜色 */
  width: 80%;             /* 设置宽度 */
  margin: 20px auto;      /* 居中显示 */
}
</style>
<p><hr>

登录后复制

这样可以让横线更符合网页整体设计风格。