怎么写CSS让H1标签的宽度与文字宽度一致？
我想要的效果是在H1标签下面加边框，然后根据文字长度，让边框的长度与文字长度一致。而现在给h1加边框以后，边框长度是默认撑满全屏。...
我想要的效果是在H1标签下面加边框，然后根据文字长度，让边框的长度与文字长度一致。
而现在给h1加边框以后，边框长度是默认撑满全屏。 展开
而现在给h1加边框以后，边框长度是默认撑满全屏。 展开
展开全部
h1{border-bottom:1px solid #ccc;width:fit-content;width:-webkit-fit-content;width:-moz-fit-content;}
使用fit属性
fit 示意如何对width和height属性均不是auto的被替换元素进行缩放。
这是w3c上的注释
____________________________________________________________________________________
为了兼容IE和火狐等浏览器，增加兼容后的代码：
HTML:
<html xmlns="
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>H1标签自适应宽度</title>
<script src="
<style type="text/css">
h1{border:1px solid #ccc;width:fit-content;width:-webkit-fit-content;width:-moz-fit-content;width:-ms-fit-content;}
</style>
</head>
<body>
<h1 style="padding:0px;"><span style="margin:0px;padding:0px;">H1标签自适应宽度</span></h1>
<script type="text/javascript">
window.onload=function(){$("h1").width($("h1 span").width()+2);}; // 此处将父元素宽度增加，是我在实际应用中的经验所得，我也不明白是为什么（估计是因为边框宽度的原因 吧）
</script>
</body>
</html>
使用fit属性
fit 示意如何对width和height属性均不是auto的被替换元素进行缩放。
这是w3c上的注释
____________________________________________________________________________________
为了兼容IE和火狐等浏览器，增加兼容后的代码：
HTML:
<html xmlns="
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>H1标签自适应宽度</title>
<script src="
<style type="text/css">
h1{border:1px solid #ccc;width:fit-content;width:-webkit-fit-content;width:-moz-fit-content;width:-ms-fit-content;}
</style>
</head>
<body>
<h1 style="padding:0px;"><span style="margin:0px;padding:0px;">H1标签自适应宽度</span></h1>
<script type="text/javascript">
window.onload=function(){$("h1").width($("h1 span").width()+2);}; // 此处将父元素宽度增加，是我在实际应用中的经验所得，我也不明白是为什么（估计是因为边框宽度的原因 吧）
</script>
</body>
</html>
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
