HTML/CSS换行问题：如何阻止<label>标签后自动换行

要阻止标签自动换行，同时完成移动端汉堡菜单、桌面端单行导航的需求，可通过以下CSS调整实现：

核心思路 #

• 默认状态（移动端）：让（汉堡图标）与后续元素保持行内布局，避免换行；汉堡菜单展开时显示导航项。
• 桌面端：隐藏汉堡图标，将导航项设置为横向单行排列。

完整CSS代码 #

/* 基础样式：处理<label>换行问题 */
#hamnav label {
  display: inline-block; /* 或inline，确保不独占一行 */
  cursor: pointer;
  /* 可选：自定义汉堡图标样式 */
  font-size: 24px;
  padding: 10px;
}

/* 移动端导航项默认隐藏 */
#hamitems {
  display: none;
}

/* 勾选复选框后显示导航项 */
#hamburger:checked ~ #hamitems {
  display: block;
}

/* 桌面端样式（屏幕宽度≥600px） */
@media only screen and (min-width: 600px) {
  /* 隐藏汉堡图标和复选框 */
  #hamnav label, #hamburger {
    display: none;
  }
  
  /* 导航项横向单行排列 */
  #hamitems {
    display: flex;
    gap: 20px; /* 控制导航项间距 */
  }
  
  #hamitems a {
    text-decoration: none;
    color: #333;
    /* 可选：自定义导航项样式 */
    padding: 8px 12px;
  }
}

代码说明 #

• 给设置display: inline-block或inline，确保它不会独占一行，直接解决自动换行问题。
• 利用CSS兄弟选择器~，实现勾选复选框时显示导航项的汉堡菜单交互逻辑。
• 桌面端通过媒体查询隐藏汉堡控件，用flex布局将导航项排成单行，匹配“one two three”的样式需求。

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