在两个输入元素下方水平对齐两个并排输入元素

Question

我在div中将两个输入元素集中在一起，并尝试在它们下面放置两个提交元素。

以下是我希望得到的结果：

相反，两个提交按钮与输入元素不完全对齐（我相信这与float: left;有关：

input[type="text"] {
 margin: 0 auto;
 width: 70%;
 display: block;
}

input[type="submit"] {
 margin: 0 auto;
 width: 35%;
 display: block;
 float: left;
}

<input type="text">
<br>
<input type="text">
<br>
<input type="submit">
<input type="submit">

Answer 1

删除float并在父元素上设置SELECT DISTINCT MAX(salary) AS max FROM STAFF WHERE salary IN (SELECT salary FROM STAFF WHERE salary<(SELECT MAX(salary) AS maxima FROM STAFF WHERE salary< (SELECT MAX(salary) AS maxima FROM STAFF)) GROUP BY salary); 。

text-align: center

body {
  text-align: center;
}
input[type="text"] {
  margin: 0 auto;
  width: 70%;
  display: block;
}
input[type="submit"] {
  margin: 0 auto;
  width: 35%;
}

Answer 2

可能有另一种方法可以做到这一点，但我所知道的最简单的方法是将这两个元素包装在父元素中并简单地应用相同的边距/宽度

<input type="text">
<br>
<input type="text">
<br>
<input type="submit">
<input type="submit">

input[type="text"] {
  margin: 0 auto;
  width: 70%;
  display: block;
}
input[type="submit"] {
  width: 50%;
  display: block;
  float: left;
}
.center-70 {
  margin: 0 auto;
  width: 70%;
}

Answer 3

有几种方法可以解决这个问题。

这是其中之一：

div.container {
  width: 70%;
}
input[type="text"] {
 margin: 0 auto;
 width: 100%;
 display: block;
}

input[type="submit"] {
 margin: 0 auto;
 width: 50%;
 display: block;
 float: left;
}

<div class="container">
<input type="text">
<br>
<input type="text">
<br>
<input type="submit">
<input type="submit">
</div>

Answer 4

解决此问题的最简单方法之一是在 CSS 代码中使用网格布局。 您可以通过以下链接了解它：

https://www.w3schools.com/css/css_grid.asp