如何让复选框与对应文本始终保持在同一行？（PHP场景）

方法一：容器包裹+CSS强制不换行 #

先修改PHP代码，把每个复选框和对应文本放在一个行内容器中，让它们成为不可拆分的整体：

<?php $j = 0; foreach($v->valeur as $valeur) { ?>
  <span class="checkbox-group">
    <input type="checkbox" 
    class=" " 
    name="check<?php echo $v->id; ?>[]"
    value="<?php echo $j; ?>"
    <?php if(strpos($v->active,','.$j.',')!==false) echo ' checked'; ?> 
    data-labelauty="<?php echo $valeur; ?>" />
    <?php echo $valeur.str_repeat('&nbsp;', 2); ?>
  </span>
  <?php ++$j; ?>
<?php } ?>

然后添加CSS样式，强制容器内元素不换行：

.checkbox-group {
  white-space: nowrap;
  display: inline-block;
  margin-right: 12px; /* 可选：给每个选项添加右侧间距 */
}

方法二：直接给元素设置行内属性 #

如果不想新增容器，也可以通过CSS直接控制复选框和文本的显示方式：

input[type="checkbox"] {
  display: inline-block;
  vertical-align: middle; /* 让复选框和文本垂直居中对齐 */
}
input[type="checkbox"] + * {
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
}

核心原理 #

• white-space: nowrap 会阻止元素或文本自动换行，确保复选框和文本始终在同一行
• 用容器包裹可将复选框与文本视为一个独立单元，避免屏幕变窄时被拆分
• vertical-align: middle 用于优化视觉对齐效果，让复选框和文本更协调

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