如何使h1和h3仅与文本一样宽[重复]答案

【问题标题】：How do I make a h1 and h3 only as wide as the text [duplicate]如何使h1和h3仅与文本一样宽[重复]
【发布时间】：2020-12-17 11:49:44
【问题描述】：

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

【问题讨论】：

display: inline-block
h1{width:max-content;} 应该这样做。或h1{display:table;}。将其保留为块元素的 2 种方法。
你想改变宽度还是字体大小？

标签： html css

【解决方案1】：

标题（<h1>，<h2>，...）是块级元素（display: block）；如果您希望它们只占用与文本一样多的空间，则应将它们设置为 display: inline。

【讨论】：

...最后并排。这是操作要求的吗？
看看我修改后的代码，上面有我在问题描述中想要的解决方案。

【解决方案2】：

虽然 cmets 和其他答案在这方面是正确的 - display : inline-block 如果文本要在一行上是正确的答案，但它们没有解决代码中的基本语义缺陷 - 你应该只有一个h1 元素，然后是 h2。

在页面结构中保持正确的层次结构或标题非常重要。

我这样做的方法是让 h1 显示：inline-block 并在其中为每个单词设置跨度 - 并让这些跨度显示：块，以便它们位于不同的行上。

请注意，我添加了一个红色边框来演示布局。并且还添加了一个 text-align: center 到包装 div 以允许所有文本居中。

div {
  text-align: center;
}

.main-heading {
  display: inline-block;
  font-family: "Josefin-Sans", sans-serif;
  font-size: 70.6px;
  font-weight: bold;
  color: #ba9a45;
  border: solid 1px red
}

.main-heading span {
  display: block;
 }

.subheading {
  font-family: "Cardo", sans-serif;
  font-size: 23.5px;
  text-align: center;
}

<!-- Headings -->

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

【讨论】：

我已经接受了你所说的一切，只是通过摆弄我的代码，这就是我的结果。我只是希望我的代码尽可能干净。 .main-heading{ 显示：块；左边距：自动；边距右：自动；宽度：最大内容；字体家族：“Josefin-Sans”，无衬线；字体大小：70.6px；字体粗细：粗体；颜色：#ba9a45； } .subheading{ 显示：块；左边距：自动；边距右：自动；宽度：最大内容；字体家族：“卡多”，无衬线；字体大小：23.5px；颜色：#fff;填充顶部：30px； }
我所做的基本上是使用我的类 .main-heading 和 .subheading 使我的内容具有最大宽度的内容 - 不需要在我的 css 中专门针对 h1 或 h3。而且我还使用自动边距保留了我的内容的中心对齐方式。

【解决方案3】：

要使块 HTML 元素不跨越其容器的整个宽度，请将其 style.display 属性更改为 inline-block。

你可以用这样的 CSS 来做到这一点：

display: inline-block

如果您想在元素本身中执行此操作，则等效为： style="display: inline-block;"

【讨论】：

【解决方案4】：

在.main-heading 上将display:block; 更改为display:inline-block;

.main-heading {
  display: inline-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;
}

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

【讨论】：

【解决方案5】：

您可以通过以下方式轻松完成：

.element{
    display: inline-block
}

它现在将只占用它应该占用的宽度！

【讨论】：