在HTML中，<hr>标签用于创建水平线，默认情况下，水平线的长度是浏览器窗口的宽度，我们可以通过CSS来设置水平线的长度。
1. 使用CSS设置水平线长度
要使用CSS设置水平线的长度，我们可以使用width属性。width属性定义了元素内容的宽度，对于水平线，我们可以设置其宽度为像素、百分比或em。
1.1 使用像素设置长度
要使用像素设置水平线的长度，可以使用以下代码：
<!DOCTYPE html>
<html>
<head>
<style>
hr {
width: 50px;
border: none; /* 隐藏默认的边框 */
background-color: 333; /* 设置背景颜色 */
}
</style>
</head>
<body>
<h2>我的第一个标题</h2>
<p>这是一个段落。</p>
<hr>
<p>这是另一个段落。</p>
</body>
</html>
在上面的代码中，我们设置了<hr>标签的宽度为50像素，这将使水平线的长度为50像素。
1.2 使用百分比设置长度
要使用百分比设置水平线的长度，可以使用以下代码：
<!DOCTYPE html>
<html>
<head>
<style>
hr {
width: 50%; /* 设置宽度为父元素的50% */
border: none; /* 隐藏默认的边框 */
background-color: 333; /* 设置背景颜色 */
}
</style>
</head>
<body>
<div style="width: 200px;">
<h2>我的第一个标题</h2>
<p>这是一个段落。</p>
<hr>
<p>这是另一个段落。</p>
</div>
</body>
</html>
在上面的代码中，我们设置了<hr>标签的宽度为其父元素的50%，这将使水平线的长度为其父元素宽度的一半，请注意，我们需要将<hr>标签放在一个具有宽度的元素内，以便我们可以使用百分比单位。
1.3 使用em设置长度
要使用em设置水平线的长度，可以使用以下代码：
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 16px; /* 设置字体大小 */
}
hr {
width: 2em; /* 设置宽度为字体大小的两倍 */
border: none; /* 隐藏默认的边框 */
background-color: 333; /* 设置背景颜色 */
}
</style>
</head>
<body>
<h2>我的第一个标题</h2>
<p>这是一个段落。</p>
<hr>
<p>这是另一个段落。</p>
</body>
</html>
在上面的代码中，我们设置了<hr>标签的宽度为字体大小的两倍，这将使水平线的长度为字体大小的两倍，请注意，我们将<hr>标签的宽度设置为相对于字体大小的倍数，而不是绝对值，这意味着，如果更改了页面的字体大小，水平线的长度也会相应地更改。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/382984.html
微信扫一扫 