文本输入和按钮垂直对齐

Question

我在输入和按钮垂直对齐齐声时遇到问题。两者都是相同的高度。

我已经尝试了浮动，内联阻止并删除了默认的浏览器外观。

干杯

https://jsfiddle.net/qLuo8jd8/

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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