如何实现fieldset元素横向并排对齐？前端新手求助

问题分析 #

你目前的布局混用了float、inline-block和嵌套div，导致fieldset无法整齐横向排列，同时input和label没有统一的垂直对齐规则，出现错位。下面是修正后的方案：

修正后的完整代码 #

HTML

<div class="fieldset-container">
  <fieldset id="f1">
    <legend>字体大小</legend>
    <input type="radio" name="font-size" id="size-1" value=".5em">
    <label for="size-1">.5em</label>
    <input type="radio" name="font-size" id="size-2" value="1em" checked>
    <label for="size-2">1em</label>
    <input type="radio" name="font-size" id="size-3" value="2em">
    <label for="size-3">2em</label>
    <input type="radio" name="font-size" id="size-4" value="3em">
    <label for="size-4">3em</label>
  </fieldset>

  <fieldset id="f2">
    <legend>其他字体样式</legend>
    <input type="checkbox" name="features" id="italic" value="italic">
    <label for="italic">斜体</label>
    <input type="checkbox" name="features" id="underline" value="underline">
    <label for="underline">下划线</label>
    <input type="checkbox" name="features" id="small-caps" value="small-caps">
    <label for="small-caps">小型大写字母</label>
  </fieldset>

  <fieldset id="f3">
    <legend>字体颜色</legend>
    <input type="radio" name="font-color" id="color-1" value="red">
    <label for="color-1">红色</label>
    <input type="radio" name="font-color" id="color-2" value="green">
    <label for="color-2">绿色</label>
    <input type="radio" name="font-color" id="color-3" value="blue">
    <label for="color-3">蓝色</label>
    <input type="radio" name="font-color" id="color-4" value="pink">
    <label for="color-4">粉色</label>
  </fieldset>
</div>

<div id="text">
  THE ANALYTICAL ENGINE HAS NO PRETENSIONS WHATEVER TO ORIGINATE ANYTHING. IT CAN DO WHATEVER WE KNOW HOW TO ORDER IT TO PERFORM. ADA LoVELACE, THE WORLD'S FIRST COMPUTER PROGRAMMER
</div>

<button type="button" id="done">确认</button>

CSS

/* 包裹fieldset的flex容器，实现横向对齐 */
.fieldset-container {
  display: flex;
  gap: 20px; /* 控制fieldset之间的间距 */
  align-items: flex-start; /* 所有fieldset顶部对齐 */
  margin-bottom: 20px;
}

#text {
  font-family: sans-serif;
  font-size: 1em;
  color: #000;
  text-decoration: none;
  margin: 20px 0;
}

/* 统一fieldset的基础样式 */
fieldset {
  padding: 10px;
  border: 1px solid #ccc;
}

/* 修正表单元素对齐问题 */
input {
  margin: 4px;
  vertical-align: middle; /* 让输入框和文本垂直居中对齐 */
}

label {
  margin-left: 2px;
  margin-right: 10px; /* 增加选项之间的横向间距 */
}

#done {
  padding: 6px 12px;
  cursor: pointer;
}

关键修正点 #

• 用flexbox容器替代原来的float和嵌套div，轻松实现fieldset横向排列，布局更稳定
• 给input添加vertical-align: middle，彻底解决单选/复选框和文本的错位问题
• 简化HTML结构，去掉不必要的嵌套div，代码更清晰
• 统一设置fieldset、input、label的间距，视觉效果更规整

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