无法获得相同大小的输入文本框和按钮答案

【问题标题】：Cant get input text boxes and buttons the same size无法获得相同大小的输入文本框和按钮
【发布时间】：2018-09-19 04:27:14
【问题描述】：

我正在尝试创建一个表单，其中输入文本框和提交框完全对齐并且大小相等。但是由于某种原因，提交按钮有几个像素不对齐，我无法找出原因。

元素大小相同，我尝试删除边距和填充，但未能解决问题。

我创建了一个简单的 jfiddle 来说明我的问题。 https://jsfiddle.net/peacefulgoldfish/d50h7n9p/26/

感谢您对此的任何帮助和建议。

html

<div>
<form>
<input>
<br>
<input>
<br>
<input type="submit">
</form>
</div>

css

#div{

  width:100%;
}

form{

  text-align: center;

}

input {
   box-sizing: border-box;
  height: 10%;
  width: 50%;

}

【问题讨论】：

标签： html css forms submit-button

【解决方案1】：

更新你的css可能对你有帮助。

#div{

  width:100%;
}

form{

  text-align: center;

}

input {
    height: 10%;
    width: 50%;
    display: block;
    margin: 0 auto;

}
body{
  box-sizing: border-box;
}

【讨论】：

【解决方案2】：

您必须指定输入的 box-sizing 以使它们都等宽。你更新后的 CSS 应该是这样的：

div {
  font-size:0;
}
#form{  
  text-align: center;
  font-size: 14px;
}
input {
  height: 10%;
  width: 50%;
  box-sizing: border-box;
}

【讨论】：

在这种情况下，您可能需要添加 font-size:0;到 div 和 font-size: 14px;到您的输入。

【解决方案3】：

你可以通过使用flex来实现

form{

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-items:center

}

但如果你不需要它，你必须处理额外的空间

【讨论】：

【解决方案4】：

Box Sizing 是解决此问题的唯一有效方法。我个人的建议是对所有元素使用box-sizing: border-box;。

像这样：

{ box-sizing：边框框； }

这里*选择当前DOM中的所有元素。

* {
 box-sizing: border-box;
}
#form {
  text-align: center;
}

input {
  height: 10%;
  width: 50%;
}

<body>
    <form>
      <input>
      <br>
      <input>
      <br>
      <input type="submit">
    </form>
</body>

【讨论】：

【解决方案5】：

这是包装器

div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

<div>

<form>
<input><br/>
<input><br/>
<input type="submit">
</form>
</div>

【讨论】：

我不是反对者，但是当我的表单位于 div 元素内时，此代码不起作用，请参阅我更新的 jsfiddle