在HTML中，<hr>标签用于创建水平线，默认情况下，水平线的宽度是100%，如果你想使水平线变短，可以通过CSS来实现，以下是详细的技术教学：

html如何使hr变短（图片来源网络，侵删）

1、内联样式

在HTML元素中直接使用style属性来设置CSS样式，将水平线的宽度设置为50%：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>使HR变短</title>
</head>
<body>
<hr style="width:50%;">
</body>
</html>

2、内部样式表

在HTML文档的<head>部分使用<style>标签来定义CSS样式，将水平线的宽度设置为50%：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>使HR变短</title>
<style>
hr {
  width: 50%;
}
</style>
</head>
<body>
<hr>
</body>
</html>

3、外部样式表

创建一个单独的CSS文件（styles.css），然后在HTML文档中使用<link>标签将其链接到HTML文档，将水平线的宽度设置为50%：

在styles.css文件中：

hr {
  width: 50%;
}

在HTML文档中：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>使HR变短</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<hr>
</body>
</html>

4、使用CSS类和ID选择器

为水平线创建一个CSS类或ID，并在CSS中定义该类的样式，将水平线的宽度设置为50%：

在HTML文档中：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>使HR变短</title>
</head>
<body>
<hr class="shorthr">
<!或者 <hr id="shorthr"> >
</body>
</html>

在CSS文件中：

.shorthr { /* 或者 #shorthr */
  width: 50%;
}

5、使用媒体查询（响应式设计）

根据屏幕尺寸调整水平线的宽度，当屏幕宽度小于600px时，将水平线的宽度设置为75%：

在CSS文件中：

@media (maxwidth: 600px) {
  hr { /* 或者 #shorthr, .shorthr */
    width: 75%; /* 根据需要调整宽度 */
  }
}

通过以上方法，你可以根据需要轻松地使HTML中的水平线变短，你可以选择最适合你项目的方法，并根据需要进行调整。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。