在 HTML 中制作部分 hr 行

在 HTML 中，我们常常需要添加分割线，让内容更加清晰和有条理。实现分割线的方式之一是使用 <hr> 标签，这个标签可以在内容中插入一条水平线，如下所示：

<p>这是一段文本</p>
<hr>
<p>这是另一段文本</p>

以上代码会在两段文本之间插入一条水平线，效果如下：

不过，有时候我们需要在页面中仅仅插入一条部分水平线，而不是整个页面的水平线。那么在 HTML 中如何实现呢？以下是两种方法。

方法一：使用样式表

我们可以使用 CSS 样式表来实现部分水平线的效果。首先，我们需要定义一个样式：

hr.fragment {
    height: 1px;
    width: 50%;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    border: none;
    background-color: #ccc;
}

以上样式定义了一个高度为 1 像素、宽度为页面宽度的一半、居中显示、顶部和底部留出 20 像素的部分水平线，颜色为灰色。

接下来，在 HTML 文件中，我们可以通过 <hr> 标签来定义这个部分水平线，并给它添加 class 属性并设置成 fragment，如下所示：

<p>这是一段文本</p>
<hr class="fragment">
<p>这是另一段文本</p>

以上代码会在两段文本之间插入一条部分水平线，效果如下：

方法二：使用 <div> 标签

除了使用样式表，还可以使用 <div> 标签来实现部分水平线。我们可以定义一个 <div>，并给它添加一个 border-bottom 样式，如下所示：

<div style="border-bottom: 1px solid #ccc; width:50%; margin:auto; margin-top: 20px; margin-bottom: 20px;"></div>

以上代码定义了一个高度为 1 像素、宽度为页面宽度的一半、居中显示、顶部和底部留出 20 像素的部分水平线，颜色为灰色。

将以上代码放在两段文本之间，就可以在它们之间插入一条部分水平线了，效果如下：

以上就是在 HTML 中制作部分 hr 行的两种方法，如果你知道其他方法，可以在评论区留言分享。