表单字段组紧凑边框设置方法

完整改进示例：

<section class="info wrapper">
  <div>
    <label for="cc-number">Credit Card Number:</label>
    &lt;input type=&quot;text&quot; id=&quot;cc-number&quot; name=&quot;cc_number&quot;&gt;
  </div>
  <div>
    <label for="exp-date">Expiration Date:</label>
    &lt;input type=&quot;text&quot; id=&quot;exp-date&quot; name=&quot;exp_date&quot;&gt;
  </div>
  <div>
    <label for="dob">Date of Birth:</label>
    &lt;input type=&quot;text&quot; id=&quot;dob&quot; name=&quot;date_of_birth&quot;&gt;
  </div>
  <div>
    <label for="address">Address:</label>
    &lt;input type=&quot;text&quot; id=&quot;address&quot; name=&quot;address&quot;&gt;
  </div>
  <div>
    <label for="email">Email:</label>
    &lt;input type=&quot;email&quot; id=&quot;email&quot; name=&quot;email&quot;&gt;
  </div>
</section>

.info {
  border: 1px solid #333;
  margin: 20px;
  width: fit-content; /* 关键：收缩宽度 */
}

.wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;        /* 控制项间距 */
  padding: 14px;     /* 内边距提升呼吸感 */
  border-radius: 6px;
  background-color: #f9f9f9;
}

.wrapper label {
  font-weight: 500;
  min-width: 140px;
  display: inline-block;
  margin-bottom: 4px;
}

.wrapper input {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  width: 240px; /* 可选：统一输入框宽度 */
}

⚠️ 注意事项：

• fit-content 在现代浏览器（Chrome 66+、Firefox 63+、Safari 14.1+）中支持良好，如需兼容旧版 IE，可改用 display: inline-block 配合 vertical-align: top；
• 务必确保每个 <input> 的 id 唯一，且与对应 的 for 属性严格匹配，以保障可访问性；
• 避免重复使用相同 name 值（如全设为 fname），应按字段语义命名，便于后端接收与验证。

通过 width: fit-content 结合语义化结构与 Flex 布局，你不仅能精准控制边框范围，还能构建出更专业、可维护、无障碍友好的表单界面。

到这里，我们也就讲完了《表单字段组紧凑边框设置方法》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！