Question

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

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

＆＃13;

body {width; 100%; margin: 0;}

.holder {
  position: relative;
}

#events {
    margin: 1rem auto;
    background: red;
    text-align: center;
    width: auto;
}

＆＃13;

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

＆＃13;

Answer 1

将display类型更改为inline-block

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

您可以使用display: inline-block来实现此目标

#events {
    margin: 1rem auto;
    background: red;
    text-align: center;
    width: auto;
    display: inline-block; // Added
}

Answer 3

由于<h1>是块级元素，因此它将占用容器的整个宽度。如果您将<h1>设为inline-block或inline元素，则会满足您的要求。但我更喜欢在<span>内添加<h1>并为其应用背景颜色。所以<h1>仍然是块元素，可以在布局中提供帮助。由于默认情况下内联元素中的<span>，因此它将为您提供任何其他样式。你永远不需要<h1>来保持布局。

h1{
  border-bottom: solid 1px black;
}
h1 span{
  background-color: red;
}

<h1 id="events">
  <span>FUTURE THINGS</span>
</h1>

将自动宽度应用于H1标题

3 个答案: