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

Question

.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>…(是块级元素(display: block(；如果希望这些内容只占用与文本一样多的空间，则应将其设置为display: inline。

Answer 2

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

.element{
display: inline-block
}

它现在只会占据它应该占据的宽度！

Answer 3

虽然注释和其他答案是正确的-如果文本在一行，display:inline块是正确的答案，但它们并不能解决代码中的基本语义缺陷-您应该只有一个h1元素，然后再加上h2。

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

我这样做的方法是将h1作为display:inline块，并在其中为每个单词设置跨度，并将这些跨度作为display:block，使它们位于单独的行上。

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

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>

Answer 4

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

你可以用CSS这样做：

display: inline-block

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

Answer 5

在.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>