HTML中调整字号时如何避免自动换行？

你当前的问题核心是 <h1> 和 <h2> 属于块级元素，默认会独占一行，所以加 <nobr> 或调整宽度都没法让它们横向排列。下面是两种直接有效的解决方法：

方法一：Flex布局包裹（推荐） #

把主页标题和导航放在统一容器里，用Flex实现横向排列，同时精准控制字号和间距：

修改后的HTML #

<div class="header-container">
  <h1><a href="Russian Mockery-Home.html">A Mockery Of Russia - </a></h1>
  <div class="nav-group">
    <a href="Russian Mockery-Poem.html">Poem - </a>
    <a href="Russian Mockery-Military.html">Broken Military - </a>
    <a href="Russian Mockery-WarCrime.html">Attempted War Crimes - </a>
  </div>
</div>

配套CSS #

.header-container {
  display: flex;
  align-items: center; /* 让文字垂直居中对齐 */
  gap: 20px; /* 主页标题和导航的间距，可自行调整 */
  white-space: nowrap; /* 防止容器内整体换行 */
}

.header-container h1 {
  font-size: 2rem; /* 主页链接的大字号 */
  margin: 0; /* 清除h1默认上下外边距，避免间距混乱 */
}

.nav-group a {
  font-size: 1.2rem; /* 其余链接的小字号 */
  margin-right: 12px; /* 导航链接之间的间距 */
  white-space: nowrap; /* 单个链接内的文字不拆分换行 */
}

/* 可选：去掉链接默认下划线 */
.header-container a {
  text-decoration: none;
}

方法二：转为行内块元素（少改HTML结构） #

如果不想调整HTML结构，直接把h1、h2改成行内块，让它们能在同一行显示：

配套CSS #

h1, h2 {
  display: inline-block;
  vertical-align: middle; /* 垂直居中对齐 */
  margin: 0; /* 清除默认外边距 */
}

h1 {
  font-size: 2rem;
  margin-right: 20px; /* 和h2的间距 */
}

h2 {
  font-size: 1.2rem;
}

h1 a, h2 a {
  white-space: nowrap; /* 链接文字不换行 */
}

这两种方法都能解决换行问题，同时保留主页链接大字号、其余链接小字号的需求，也不会破坏原有间距。

内容的提问来源于stack exchange，提问作者Beans