在 fieldset 元素内获取输入框 100% 均匀宽度

Question

如何让输入框以相对于字段集 100% 的宽度均匀地放置在字段集元素内？

就目前情况而言，输入框似乎在字段集的右侧溢出，我不确定为什么？

这是问题的图像（ie10）：

这是标记：

fieldset {
  padding: 3px;
  width: 300px
}

label {
  float: left;
  font-weight: bold;
}

input {
  width: 100%;
}

<fieldset>
  <legend>Subscription info</legend>
  <input type="text" name="name" id="name" />
</fieldset>

Answer 1

您面临的问题是input浏览器计算的默认样式。浏览器向元素添加内边距和边框<input>。

当您在输入上进行设置时width:100%;，如果添加默认的填充和边框，它会呈现比容器更宽的内容，因此会溢出。

您可以通过添加 : 来解决此问题，box-sizing:border-box;因此input内边距和边框包含在 100% 宽度中。

fieldset {
  padding: 3px;
  width: 300px
}

label {
  float: left;
  font-weight: bold;
}

input {
  width: 100%;
  box-sizing: border-box;
}

<fieldset>
  <legend>Subscription info</legend>
  <input type="text" name="name" id="name" />
</fieldset>

有关该房产的更多信息请参见此处box-sizing。