Question

我需要你的帮助，

如何将输入框均匀放置在我的fieldset元素内，相对于我的fieldset，宽度为100％？

现在看来，输入框似乎正在推出字段集，我不知道为什么？

这是问题的图片（ie10）： enter image description here

这是标记：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
fieldset {
  padding: 3px;
  width: 300px
}
label {
  float:left;
  font-weight:bold;
}
input {
    width: 100%;
}
</style>

</head>

<body>


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


</body>

</html>

Answer 1

您面临的问题是浏览器在input上计算的默认样式。浏览器为<input>元素添加填充和边框。

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

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

<强> FIDDLE

有关box-sizing属性的更多信息here。

Answer 2

对不起，以前。但如果你移除填充物，它就不会被切断。

fieldset {
width: 300px
}

在fieldset元素内获得100％均匀宽度的输入框

2 个答案: