CSS如何调整论坛页面表单复选框、单选框与选项的排版顺序

解决方案 #

你遇到的布局问题核心有两点：一是单选/复选选项缺少独立的容器包裹，二是同组单选按钮的name属性不统一（会导致无法正常单选互斥），调整HTML结构后配合简单CSS就能实现需求。 #

第一步：修改HTML结构

将每个单选/复选选项单独用<label>标签包裹，先写选项文字，再放对应的输入框，既符合你要的排版顺序，也能实现点击文字选中选项的交互体验，同时修正同组单选的name属性：

<form id="survey-form">
  <label for="Name" id="name-label">姓名</label>
  <input type="text" required placeholder="请输入姓名" id="name">

  <label for="Email" id="email-label">邮箱</label>
  <input type="email" required placeholder="请输入邮箱" id="email">

  <label for="Age" id="number-label">年龄（选填）</label>
  <input type="number" required placeholder="请输入年龄" min="16" max="100" id="number">

  <label for="Year" id="dropdown">你目前在读几年级？</label>
  <select name="dropdown">
    <option disabled selected value>请选择年级</option>
    <option value="1st Year">一年级</option>
    <option value="2nd Year">二年级</option>
    <option value="3rd Year">三年级</option>
    <option value="4th Year">四年级</option>
  </select>

  <label id="hear-about-us">你从哪里了解到我们？</label>
  <!-- 每个选项单独包裹，统一name属性保证单选互斥 -->
  <label class="option-item">
    朋友推荐
    <input type="radio" name="hear_source" value="friend">
  </label>
  <label class="option-item">
    线上渠道
    <input type="radio" name="hear_source" value="online">
  </label>
  <label class="option-item">
    高中宣传
    <input type="radio" name="hear_source" value="high_school">
  </label>

  <label id="fav">你最喜欢我们学校的哪个特色？</label>
  <!-- 复选框选项同理单独包裹 -->
  <label class="option-item">
    体育项目
    <input type="checkbox" name="fav_feature" value="sports">
  </label>
  <label class="option-item">
    社团活动
    <input type="checkbox" name="fav_feature" value="activities">
  </label>
  <label class="option-item">
    奖助学金
    <input type="checkbox" name="fav_feature" value="sponsorships">
  </label>
  <label class="option-item">
    就业机会
    <input type="checkbox" name="fav_feature" value="job">
  </label>

  <label for="Comments" id="comment">你有什么改进建议？</label>
  <textarea name="comment" id="text-area" cols="30" rows="5"></textarea>

  <button type="submit" id="submit">提交</button>
</form>

第二步：新增CSS样式

给选项容器设置纵向弹性布局，即可实现文字在上、输入框在下的效果，可自行调整边距控制间距：

/* 在原有CSS基础上追加以下代码即可 */
.option-item {
  display: flex;
  flex-direction: column;
  margin: 8px 0 15px;
  /* 如果需要输入框左对齐可取消下面注释 */
  /* align-items: flex-start; */
}

你之前单独给input设置display:block不生效的原因是：原代码中选项文字是和input同级的游离文本节点，没有被容器包裹，调整起来没有结构依托，修改后每个选项都是独立的布局单元，后续要调整样式也会灵活很多。

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