如何将一条水平线分成多个部分?

htmlweb developmentfront end technology更新于 2025/3/26 23:40:17

在 HTML 中，<hr> 标签代表水平线，通常显示为一条水平线，用于分隔 HTML 页面中的内容(或定义更改)。<hr> 标签是一个空标签，后面不需要跟结束标签。此标签的语法如下 –

<hr> ...

它支持以下属性:

align: 它决定了页面上规则的对齐方式(左/中/右)。如果未指定值，则使用默认值(左)。
color: 使用颜色名称或十六进制值设置规则的颜色。
noshade: 将规则设置为无阴影。
size: 设置规则的高度(以像素为单位)。
width: 设置规则的宽度(以像素或百分比为单位)。

示例

以下示例展示了 <hr> 标签的默认行为。

<!DOCTYPE html>
<html>
    <title>An example of horizontal rule</title>
<body>
<h3>It is a beautiful day</h3>
<hr>
There is a horizontal rule above this line.
</body>
</html>

不过，我们可以使用某些 CSS 属性将水平线分成多个部分，如下所述。

CSS 属性 Display

'display' CSS 属性决定元素是被视为块元素还是内联元素，以及其子元素使用的布局方式，可以是流式布局、网格布局或弹性布局。display 属性正式指定元素的内部和外部显示类型。

外部类型决定元素是否参与流式布局;内部类型决定子元素的布局。

display: value;

一些重要的值包括:inline、block、contents、flex、grid、inline-block 等。

inline: 元素创建一个或多个内联元素框，前后没有换行符。如果有空格，则在正常流中，下一个元素将位于同一行。
block: 在正常流中，元素会生成一个块元素框，并在元素前后生成换行符。
contents: 容器被移除，并且元素在 DOM 中上一级的子元素将被替换。
flex: 该元素的行为与块元素相同，并使用弹性框模型排列其内容。
grid: 该元素的行为与块元素相同，并使用网格模型排列其内容。
inline-block: 该元素创建一个块元素框，该框与周围内容一起流动，就像它是一个单独的内联框(行为很像替换元素会)。

使用 border-top 属性的虚线值

'border-top' 简写属性将所有顶部边框属性连接成一个声明。以下属性必须按以下顺序设置:

border-top-width
border-top-style(必需)(必需)
border-top-color

如果未指定 border-top-color，则使用的颜色将为文本颜色。

语法

border-top: border-width border-style border-color

其中，

border-width: 设置元素上边框的宽度。
border-style: 设置元素上边框的样式(点线/虚线/实线/隐藏线…)。
border-style: 设置元素上边框的样式(点线/虚线/实线/隐藏线…)。

示例

此示例利用 <hr> 元素的 border-top 属性及其"dashed"值，将水平线分成多个部分。

<!DOCTYPE html>
<html>
  <head>
    <title>How to Divide a Horizontal Line into Multiple Parts?</title>
    <style>
      hr {
        border-top: 4px dashed thistle;
      }
      p{
          background-color:lavenderblush;
          padding:5px 4px 4px 10px;
          color:rebeccapurple;
          font-size:18px;
          border:1px solid purple;
      }
    </style>
  </head>
  <body>
    <hr>
    <h2>A Life Lesson</h2>
    <hr>
    <p>
      The unhappiest people are often those who care the most about what everyone else thinks. There is great freedom in leaving others to their opinions. And there is a huge weight lifted when you take nothing personally.
    </p>
  </body>
</html>

使用多个不同宽度的 <hr> 标签

在本例中，我们使用了多个 <hr> 元素，并将 display 设置为"inline-block"，border-top 设置为"solid"。然后，我们设置每条水平线的所需宽度。

示例

<!DOCTYPE html>
<html>
  <head>
    <title>How to Divide a Horizontal Line into Multiple Parts?</title>
    <style>
      .inlineHR {
        display: inline-block;
        border-top: 4px solid mediumvioletred;
      }
      .hr1 {
        width: 70px;
      }
      .hr2 {
        width: 60px;
        margin-left: 10px;
      }
      .hr3 {
        width: 50px;
        margin-left: 10px;
      }
      .hr4 {
        width: 40px;
        margin-left: 10px;
      }
      .hr5 {
        width: 30px;
        margin-left: 10px;
      }
      p{
          text-align:justify;
          background-color:seashell;
      }
    </style>
  </head>
  <body>
    <h2>CSS display property</h2>
    <hr class='inlineHR hr1' />
    <hr class='inlineHR hr2' />
    <hr class='inlineHR hr3' />
    <hr class='inlineHR hr4' />
    <hr class='inlineHR hr5' />
    <p>
        The display CSS property determines whether an element is treated as a block or inline element, as well as the layout used for its children, which can be flow layout, grid, or flex. Formally, the display property specifies the inner and outer display types of an element. The outer type determines an element's participation in flow layout; the inner type determines child layout.
    </p>
  </body>
</html>