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

。主标题{
显示：块；
字体系列：“Josefin Sans”，无衬线；
字体大小：70.6px；
字体大小：粗体；
文本对齐：居中；
颜色：#ba9a45；
}
.副标题{
字体系列：“Cardo”，无衬线；
字号：23.5px；
文本对齐：居中；
颜色：#fff；
填充顶部：30px；
}

大西洋
赌场
满足你的欲望

要使块HTML元素不跨越其容器的整个宽度，请将其

样式更改为
内联块

您可以使用CSS这样做：

display: inline-block

如果您想在元素本身中执行此操作，则等价物为：
style=“display:inline block；”
在
上。主标题
更改
显示：块至
显示：内联块


。主标题{
显示：内联块；
字体系列：“Josefin Sans”，无衬线；
字体大小：70.6px；
字体大小：粗体；
文本对齐：居中；
颜色：#ba9a45；
}
.副标题{
字体系列：“Cardo”，无衬线；
字号：23.5px；
文本对齐：居中；
颜色：#fff；
填充顶部：30px；
}

大西洋
赌场
满足你的欲望
标题（
，
，…）是块级元素（
显示：块
）；如果您希望这些选项只占用与文本一样多的空间，则应将它们设置为
显示：内联
，同时注释和其他答案在该选项中是正确的-如果文本在一行上，则显示：内联块是正确的答案，它们并没有解决代码中的基本语义缺陷——您应该只有一个h1元素，然后是一个h2元素

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

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

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


div{
文本对齐：居中；
}
.主标题{
显示：内联块；
字体系列：“Josefin Sans”，无衬线；
字体大小：70.6px；
字体大小：粗体；
颜色：#ba9a45；
边框：实心1px红色
}
.主航向跨度{
显示：块；
}
.副标题{
字体系列：“Cardo”，无衬线；
字号：23.5px；
文本对齐：居中；
}

大西洋
赌场
满足你的欲望
您可以通过以下方式轻松完成：

.element{
    display: inline-block
}

它现在将只占用它应该占用的宽度
 
display:inline块
h1{width:max content；}
vould do。或
h1{display:table；}
。有两种方法可以将其保持为块元素。您想更改宽度还是字体大小？我已经接受了您所说的一切，只需修改我的代码，这就是我的结果。我只希望我的代码尽可能干净。主标题{显示：块；左边距：自动；右边距：自动；宽度：最大内容；字体系列：“Josefin Sans”，无衬线；字体大小：70.6px；字体重量：粗体；颜色：#ba9a45；}。副标题{显示：块；左边距：自动；右边距：自动；宽度：最大内容；字体系列：“Cardo”，无衬线；字体大小：23.5px；颜色：#fff；padding top:30px；}我基本上做的是使用我的class.main heading和.subheading使我的内容具有最大的内容宽度-不需要在css中专门针对h1或h3。我还通过使用margin auto保留了我内容的中心对齐。。。。最后肩并肩。这就是op要求的吗？看看我的修订代码，以及我在上面的问题描述中所希望的解决方案。