HTML/CSS中如何让单选按钮与长文本标签保持在同一行？

方法1：基于Bootstrap内置类调整 #

你的代码使用了Bootstrap的form-check类，默认布局下若容器宽度不足，标签可能会整体换行到单选按钮下方。可以通过添加内置工具类修复：

<div class="form-check fs-3 mb-3">
  <input id="low-3" name="low-3" type="radio" value="light" class="d-inline">
  <label for="low-3" class="d-inline-block align-middle">very long very long very long very long context</label>
</div>

• d-inline-block让标签保持块级特性但不独占一行
• align-middle确保标签与单选按钮垂直居中对齐

方法2：自定义Flex布局（推荐） #

用Flex布局强制子元素始终在同一行，同时支持文本在按钮右侧换行（或强制不换行）：

<style>
  .radio-row {
    display: flex;
    align-items: center;
    /* 若要强制文本不换行，取消下面注释：
    white-space: nowrap;
    overflow-x: auto;
    */
  }
  .radio-row label {
    margin-left: 8px;
    white-space: normal; /* 允许文本在按钮右侧换行 */
  }
</style>

<div class="radio-row fs-3 mb-3">
  <input id="low-3" name="low-3" type="radio" value="light">
  <label for="low-3">very long very long very long very long context</label>
</div>

• 保留默认设置：文本会在按钮右侧自动换行，标签整体不会跳到按钮下方
• 取消注释white-space: nowrap：强制文本不换行，容器会出现横向滚动条避免溢出

方法3：原生CSS调整元素布局 #

直接修改单选按钮和标签的display属性，预留按钮空间防止换行：

<style>
  .form-check input[type="radio"] {
    display: inline-block;
    vertical-align: middle;
  }
  .form-check label {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    max-width: calc(100% - 30px); /* 预留单选按钮的宽度 */
  }
</style>

<div class="form-check fs-3 mb-3">
  <input id="low-3" name="low-3" type="radio" value="light">
  <label for="low-3">very long very long very long very long context</label>
</div>

max-width确保标签不会占用全部容器宽度，给单选按钮留出固定空间，避免标签被挤到下一行。

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