如何调整HTML中<h3>标签宽度使其小于<h1>标签？

当前页面里的h1和h3默认都是块级元素，宽度会占满header的100%，所以看起来宽度一致。要让h3作为国家小标题更窄，只需要在CSS里给h3添加限制宽度的样式即可，以下是两种简单有效的方法：

方法1：让h3宽度随内容自适应（推荐） #

这种方式下h3的宽度只由文字内容决定，自然比h1窄，同时保持居中：

h3 {
  font-size: 20px; /* 比h1的28px小，视觉上更像小标题，可选 */
  margin: 8px 0 0; /* 调整和上方h1的间距，优化排版 */
  display: inline-block; /* 取消块级元素的100%宽度，改为内容自适应 */
}

方法2：固定h3的最大宽度 #

如果担心国家名称过长导致h3太宽，可以设置最大宽度，确保始终比h1窄：

h3 {
  font-size: 20px;
  margin: 8px 0 0;
  max-width: 80%; /* 设置为h1宽度的80%，可根据需求调整 */
  margin-left: auto;
  margin-right: auto; /* 让h3在header里居中 */
}

把上面任意一段代码添加到你的CSS文件里（比如放在h1样式的下方），就能实现h3宽度小于h1的效果，同时保持它作为国家小标题的居中显示。

内容的提问来源于stack exchange，提问作者Patrik Qvarnström