如何将水平线分成多个部分

在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属性显示

CSS属性“display”确定元素是作为块级元素还是内联元素处理，以及其子元素使用的布局，可以是流动布局，网格布局或弹性布局。正式来说，display属性指定了元素的内部和外部显示类型。

外部类型决定了元素在流动布局中的参与程度；内部类型决定了子元素的布局。

display: value;

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

inline： 该元素创建一个或多个内联元素框，它们之间没有换行符。如果有空间，下一个元素将在同一行上正常显示。
block： 在正常流中，该元素生成一个块级元素框，在元素之前和之后都生成换行符。
contents： 容器被移除，并由DOM中上一级元素的子元素替换。
flex： 该元素表现为块级元素，并使用flexbox模型排列其内容。
grid： 该元素表现为块级元素，并使用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： 设置元素顶部边框的样式（点状/虚线/实线/隐藏…）。

示例

此例子使用border-top属性在<hr>元素上使用了”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>元素，将显示设置为”inline-block”，边框顶部设置为”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>