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

您可以使用flex

form{

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

}

但是，如果不需要，您必须处理更多的空间

Answer 3

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

#div{

  width:100%;
}

form{

  text-align: center;

}

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

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

Answer 4

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

赞：

{ 框大小：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>

Answer 5

使用一些值代替％，例如“ 10 pt”或“ 10 px”。以点或像素为单位定义尺寸要好于相对屏幕尺寸（％）。

Answer 6

这里是包装纸

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

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

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

6 个答案: