第1个回答 2019-07-05
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>本回答被提问者和网友采纳