css - 文本输入和按钮垂直对齐

Question

我在获取输入和按钮以垂直对齐齐平时遇到问题。两者高度相同。

我试过 float 、内联 block 并也删除了默认的浏览器外观。

干杯

https://jsfiddle.net/qLuo8jd8/

body {
  background: grey;
}

.editing-form {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
}

.editing-input {
  -webkit-appearance: none;
  width: 500px;
  height: 45px;
  padding: 0;
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  background-color: #fff;
  box-shadow: 0;
  border-width: 0;
  color: #363636;
}

.editing-input:focus {
  outline: none;
}

.editing-submit {
  -webkit-appearance: none;
  padding: 0;
  margin: 0;
  width: 100px;
  height: 45px;
  background-color: blue;
  color: #fff;
  border: 0;
}

.editing-submit:focus {
  outline: none;
}

<form class="editing-form">
  <input class="editing-input" type="text" />
  <button type="button" class="editing-submit">Save Title</button>
</form>

Answer 1

从 .editing-form 中删除 display: flex; 并检查它是否有效