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

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

我尝试了float，inline-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>

最佳答案

从display: flex;删除.editing-form并检查它是否可以工作

关于css - 文字输入和按钮垂直对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48765866/