如何实现复选框横向排列并点击时显示对应表单？

嘿，太懂这种“功能跑通了但布局歪掉”的憋屈感了！既然你已经搞定了单个复选框触发表单显示的逻辑，那咱们只需要调整下复选框的布局样式，就能把residential、commercial、industrial这三个选项整齐地横向排列起来。

下面是两种简单靠谱的实现方式，直接结合你已有的功能就能用：

方法1：用Flexbox实现横向排列（推荐，布局更灵活） #

Flexbox是现在处理横向/纵向布局最省心的工具，给复选框的父容器加个display: flex就能轻松搞定：

<!-- HTML结构 -->
<div class="checkbox-group">
  <label>
    <input type="checkbox" class="form-trigger" data-target="residential-form">
    Residential
  </label>
  <label>
    <input type="checkbox" class="form-trigger" data-target="commercial-form">
    Commercial
  </label>
  <label>
    <input type="checkbox" class="form-trigger" data-target="industrial-form">
    Industrial
  </label>
</div>

<!-- 对应的表单（初始隐藏） -->
<div id="residential-form" class="form-container" style="display: none;">
  <h3>Residential Form</h3>
  <!-- 你的住宅表单内容 -->
  <input type="text" placeholder="Enter your address">
</div>
<div id="commercial-form" class="form-container" style="display: none;">
  <h3>Commercial Form</h3>
  <!-- 你的商业表单内容 -->
  <input type="text" placeholder="Enter company name">
</div>
<div id="industrial-form" class="form-container" style="display: none;">
  <h3>Industrial Form</h3>
  <!-- 你的工业表单内容 -->
  <input type="text" placeholder="Enter facility ID">
</div>

/* CSS样式 */
.checkbox-group {
  display: flex;
  gap: 20px; /* 可选：给复选框之间加间距，观感更舒服 */
  margin-bottom: 20px;
}

/* 可选：给复选框和文字加一点样式，提升交互感 */
.checkbox-group label {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
}

// JavaScript逻辑（复用你已有的显示逻辑，或者用这个更通用的版本）
document.querySelectorAll('.form-trigger').forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    const targetForm = document.getElementById(this.dataset.target);
    targetForm.style.display = this.checked ? 'block' : 'none';
  });
});

方法2：用inline-block实现横向排列（兼容性更好，适合老项目） #

如果你的项目需要兼容较老的浏览器，或者不想用Flexbox，也可以给每个复选框的label设置display: inline-block：

/* 替换Flexbox的CSS，其他HTML/JS不变 */
.checkbox-group label {
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}

为什么之前的布局会换行？ #

默认情况下，<label>标签是块级元素（block），每个都会占满一行宽度，所以会自动换行。我们上面的方法就是把它们改成flex子元素或者inline-block元素，这样就能在同一行排列了。

你直接把这些代码替换到项目里，应该就能完美解决横向排列的问题，同时保留你已经实现的表单显示功能～

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