HTML中的<hr>标签简介
<hr>标签是HTML中用于创建水平分隔线的元素，默认情况下，<hr>标签的高度为1像素，颜色为浅灰色，有时候我们希望将分隔线的宽度变短，以便更好地适应页面布局，本文将介绍如何通过CSS来调整<hr>标签的宽度，使其变得更短。
CSS样式设置
要调整<hr>标签的宽度，我们可以使用CSS的width属性，以下是一些常用的方法：
1、使用固定宽度：
<!DOCTYPE html>
<html>
<head>
<style>
hr {
width: 50px; /* 设置宽度为50像素 */
}
</style>
</head>
<body>
<h2>标题</h2>
<p>这是一个段落。</p>
<hr>
</body>
</html>
2、使用百分比宽度：
<!DOCTYPE html>
<html>
<head>
<style>
hr {
width: 80%; /* 设置宽度为父元素宽度的80% */
}
</style>
</head>
<body>
<h2>标题</h2>
<p>这是一个段落。</p>
<hr>
</body>
</html>
3、使用视口单位(vw):
<!DOCTYPE html>
<html>
<head>
<style>
hr {
width: 80vw; /* 设置宽度为视口宽度的80% */
}
</style>
</head>
<body>
<h2>标题</h2>
<p>这是一个段落。</p>
<hr>
</body>
</html>
4、使用关键字calc():
<!DOCTYPE html>
<html>
<head>
<style>
hr {
width: calc(80% 20px); /* 设置宽度为父元素宽度减去20像素 */
}
</style>
</head>
<body>
<h2>标题</h2>
<p>这是一个段落。</p>
<hr>
</body>
</html>
相关问题与解答
1、如何让<hr>标签始终保持在页面底部？
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/212748.html
微信扫一扫