如何为表单输入框组设置紧凑边框（仅包裹内容而非整行）

等块级容器添加 border，浏览器默认会将其渲染为 100% 宽度的块元素，导致边框横贯整个父容器宽度——即使内部内容（如标签+输入框）实际只占一小部分空间。这正是原问题中“边框铺满整行”的根本原因。

解决的关键在于：改变容器的宽度计算方式。css 的 width: fit-content 正是为此设计——它使容器宽度收缩至其内部最宽子元素所占据的宽度（含内边距、边框等），而非默认的可用宽度。

以下是优化后的完整实现方案：

   
     Credit Card Number:        
   
     Expiration Date:        
   
     Date of Birth:        
   
     Address:        
   
     Email:        
 

对应 CSS：

.info {   border: 1px solid #333;   margin: 20px;   width: fit-content; /* ✅ 核心：收缩宽度至内容所需 */   padding: 12px;      /* 可选：增加内边距提升可读性 */ }  .wrapper {   display: flex;   flex-direction: column;   gap: 8px;           /* 控制每行间距 */ }  /* 建议：统一标签宽度，避免因文字长度不同导致错位 */ label {   display: inline-block;   min-width: 140px;   font-weight: 500;   margin-right: 8px; }  input {   padding: 6px 10px;   border: 1px solid #ccc;   border-radius: 4px;   font-size: 14px; }

⚠️ 注意事项：

• fit-content 在现代浏览器（chrome 69+、firefox 63+、safari 14.1+）中完全支持；如需兼容旧版 IE，可改用 display: inline-block + text-align: left 组合替代，但语义性稍弱；
• 每个 和 应包裹在独立
  中，确保 flex-direction: column 能正确逐行堆叠；

• 所有 id 值必须唯一（原代码中多个 id=”fname” 已修正为语义化唯一 ID），否则影响可访问性和 javaScript 操作；
• 推荐使用 显式关联，提升屏幕阅读器支持与点击体验（点击标签即可聚焦对应输入框）。

该方案不仅解决了边框过宽问题，还通过 Flex 布局与合理间距提升了整体表单的专业性与用户体验。