html - 如何使 h1 和 h3 与文本一样宽

Question

这个问题已经有答案了:

How can I make a div not larger than its contents? (44 个回答)

已关闭 3 年前。

.main-heading {
  display: block;
  font-family: "Josefin-Sans", sans-serif;
  font-size: 70.6px;
  font-weight: bold;
  text-align: center;
  color: #ba9a45;
}

.subheading {
  font-family: "Cardo", sans-serif;
  font-size: 23.5px;
  text-align: center;
  color: #fff;
  padding-top: 30px;
}

<!-- Headings -->

<div>
  <h1 class="main-heading">ATLANTIC</h1>
  <h1 class="main-heading">CASINO</h1>
  <h3 class="subheading">FEED YOUR DESIRES</h3>
</div>

我似乎无法使我的 h1 和 h3 背景仅与文本一样宽，而不是跨越 整个宽度线。

如何减少 h1 和 h3 的背景，使其仅跨越文本末尾？

--

通过考虑以下用户提供的所有建议，我成功解决了我的问题。

看看我修改后的代码是否有效:

<div class="title-headings">
  <h1 class="main-heading">ATLANTIC</h1>
  <h1 class="main-heading">CASINO</h1>
  <h3 class="subheading">FEED YOUR DESIRES</h3>
</div>


.main-heading{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: max-content;
  font-family: "Josefin-Sans", sans-serif;
  font-size: 70.6px;
  font-weight: bold;
  color: #ba9a45;
}

.subheading{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: max-content;
  font-family: "Cardo", sans-serif;
  font-size: 23.5px;
  color: #fff;
  padding-top: 30px;
}

Answer 1

标题( <h1> 、 <h2> 、...)是 block 级元素( display: block )；如果您希望这些仅占用与文本一样多的空间，则应将它们设置为 display: inline .