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

Question

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

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

我创建了一个简单的 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%;

}

Answer 1

您必须指定输入框的大小以使所有输入框的宽度相等。更新后的 CSS 应该是这样的：

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

Answer 2

这是包装纸

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

<div>

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

Answer 3

可以使用flex实现

form{

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

}

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

Answer 4

更新您的 css 可能会对您有所帮助。

#div{

  width:100%;
}

form{

  text-align: center;

}

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

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

Answer 5

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

像这样：

{ 框大小：边框框； }

这里*选择当前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>

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

Cant get input text boxes and buttons the same size

html

css

forms

submit-button