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

完整改进示例：

  

    Credit Card Number:
    
  
  

    Expiration Date:
    
  
  

    Date of Birth:
    
  
  

    Address:
    
  
  

    Email:
    
  

.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；
• 务必确保每个 的 id 唯一，且与对应 的 for 属性严格匹配，以保障可访问性；
• 避免重复使用相同 name 值（如全设为 fname），应按字段语义命名，便于后端接收与验证。

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

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