如何让H1标题元素宽度适配其文本内容？

这问题我太熟悉啦！默认情况下H1是块级元素，会自动撑满父容器的宽度，所以你的红色背景才会铺满整行。要让背景只覆盖标题文本的宽度，有几个简单又实用的方法，我给你详细说说：

方法1：使用 display: inline-block #

把H1从块级元素改成行内块元素，它的宽度就会完全由内部文本决定，同时还能保留块级元素的特性（比如设置margin、padding）。需要注意的是，要让标题在父容器里居中的话，得把text-align: center移到父容器.holder上：

body { width: 100%; margin: 0; }
.holder { 
  position: relative; 
  text-align: center; /* 让行内块的H1在父容器居中 */
}
#events { 
  margin: 1rem auto; 
  background: red; 
  display: inline-block; /* 关键属性 */
}

对应的HTML不变：

<div class="holder"> <h1 id="events">FUTURE THINGS</h1> </div>

方法2：使用 width: fit-content #

这是CSS3推出的属性，直接让元素宽度自适应内容，兼容性现在已经非常好（除了IE11及更早版本）。这个方法不用修改display属性，保持H1的块级特性，同时margin: auto还能让它在父容器里居中，代码更简洁：

body { width: 100%; margin: 0; }
.holder { position: relative; }
#events { 
  margin: 1rem auto; 
  background: red; 
  text-align: center; 
  width: fit-content; /* 关键属性 */
}

方法3：使用浮动（不推荐） #

浮动元素的宽度也会由内容决定，但需要额外处理清除浮动的问题，操作起来比较麻烦，所以只在特殊场景下考虑使用：

body { width: 100%; margin: 0; }
.holder { 
  position: relative; 
  overflow: hidden; /* 清除浮动 */
  text-align: center;
}
#events { 
  margin: 1rem auto; 
  background: red; 
  float: left; /* 关键属性 */
}

总结 #

如果你的项目不需要兼容老IE，优先选width: fit-content，代码简洁还保留H1的块级特性；如果要兼容旧浏览器，就用display: inline-block，效果一样稳定。

内容的提问来源于stack exchange，提问作者pjk_ok