本文介绍如何使用 css 的 `width: fit-content` 让容器边框紧密包裹内部表单元素，避免默认块级元素撑满父容器的常见问题，并提供结构优化与样式增强方案。

在 HTML 表单中，若直接对

等块级容器设置 border，其默认 display: block 会使其宽度占满可用水平空间，导致边框横跨整个容器宽度——即使内部内容很短。要实现“边框仅围绕实际内容区域”的效果，关键在于改变容器的宽度计算方式。

最简洁有效的解决方案是：为容器设置 width: fit-content。该值使元素宽度收缩为内部子元素所需的最大宽度（即内容宽度），从而让边框自然贴合内容边界：

.info {
  border: 1px solid black;
  margin: 20px;
  width: fit-content; /* ✅ 核心修复：让宽度仅包裹内容 */
}

但仅靠 fit-content 还不够理想——原始代码中 和 是平铺在文档流中的行内元素，易因换行、间距或对齐问题导致布局松散。推荐进一步优化结构与样式：

CDP浏览器大师

CDP浏览器大师：通过Chrome DevTools Protocol驱动已登录浏览器实现自动化任务，解决反爬封号、选择器失效、SPA路由难导航、固定sleep不准四大痛点。核心能力包括UA伪装、WebGL/Canvas指纹混淆、智能等待、动态选择器以及可视化调试。

下载

✅ 结构优化：为每组 + 添加语义化

包裹，并确保 id 唯一（原代码中多个 id="fname" 违反 HTML 规范）；
✅ 样式增强：使用 Flex 布局控制垂直排列与间距，提升可读性与一致性。

完整改进示例：

<section class="info wrapper">
  <div>
    <label for="cc-number">Credit Card Number:</label>
    <input type="text" id="cc-number" name="cc_number">
  </div>
  <div>
    <label for="exp-date">Expiration Date:</label>
    <input type="text" id="exp-date" name="exp_date">
  </div>
  <div>
    <label for="dob">Date of Birth:</label>
    <input type="text" id="dob" name="date_of_birth">
  </div>
  <div>
    <label for="address">Address:</label>
    <input type="text" id="address" name="address">
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
  </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；
• 务必确保每个 的 id 唯一，且与对应 的 for 属性严格匹配，以保障可访问性；
• 避免重复使用相同 name 值（如全设为 fname），应按字段语义命名，便于后端接收与验证。

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