html - 将自动宽度应用于 H1 标题

Question

如何获得 H1 标题，以便元素本身的宽度由使用的文本量定义？

在下面的示例中，我希望红色背景成为标题的宽度，但似乎无法让它发挥作用。

body {width; 100%; margin: 0;}

.holder {
  position: relative;
}

#events {
    margin: 1rem auto;
    background: red;
    text-align: center;
    width: auto;
}

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

Answer 1

将 display 类型更改为 inline-block

body {width; 100%; margin: 0;}

.holder {
  position: relative;
  /* To center the text */
  text-align:center;
}

#events {
    margin: 1rem auto;
    background: red;
    width: auto;
    display:inline-block;
}

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