如何让HTML中表单的边框仅包裹内容而非整行？

我尝试给信用卡号、有效期、出生日期、地址、邮箱这五个表单字段添加边框，希望边框只包裹表单内容，而不是占满整个水平宽度，但没能实现效果。我写的代码如下：

<section class="info">
  <label for="fname" class="name">Credit Card Number:</label>
  <input type="text" id="fname" name="fname">
  <br>
  <label for="fname" class="name">Expiration Date:</label>
  <input type="text" id="fname" name="fname">
  <br>
  <label for="fname" class="name">Date of Birth:</label>
  <input type="text" id="fname" name="fname">
  <br>
  <label for="fname" class="name">Adress:</label>
  <input type="text" id="fname" name="fname">
  <br>
  <label for="fname" class="name">Email:</label>
  <input type="text" id="fname" name="fname">
</section>

.info {
    border: 1px solid black;
    margin: 20px;
    display: 
}

解决方法 #

问题核心是<section>默认是块级元素，会自动占满父容器的整个水平宽度。要让边框只包裹内容，只需调整它的display属性，同时修复代码里的不合理之处：

1. 修改.info的display属性：设置为inline-block，这样元素宽度会由内部内容决定，不再撑满整行
2. 修复重复的id和for：HTML要求每个表单元素的id必须唯一，label的for要对应正确的id
3. 优化布局结构：用<div>包裹每组label和input，让布局更规整，也方便调整间距

修改后的完整代码：

HTML

<section class="info">
  <div class="form-row">
    <label for="credit-card" class="name">Credit Card Number:</label>
    <input type="text" id="credit-card" name="credit-card">
  </div>
  <div class="form-row">
    <label for="expiration" class="name">Expiration Date:</label>
    <input type="text" id="expiration" name="expiration">
  </div>
  <div class="form-row">
    <label for="dob" class="name">Date of Birth:</label>
    <input type="text" id="dob" name="dob">
  </div>
  <div class="form-row">
    <label for="address" class="name">Address:</label>
    <input type="text" id="address" name="address">
  </div>
  <div class="form-row">
    <label for="email" class="name">Email:</label>
    <input type="text" id="email" name="email">
  </div>
</section>

CSS

.info {
  border: 1px solid black;
  margin: 20px;
  display: inline-block;
  padding: 12px; /* 加内边距，让内容和边框之间有留白，更美观 */
}

.form-row {
  margin-bottom: 10px; /* 给每组表单之间加垂直间距 */
}

这样修改后，边框就会紧紧包裹住所有表单内容，不会再占满整个水平区域，同时表单布局也更清晰规范。

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