如何将输入字段和按钮向上对齐，使其与其他按钮对齐？

Question

我想以响应方式直接向上移动按钮，以使其与使用i的iOS和Android按钮保持一致。

我在下面的代码中尝试提供的输出是屏幕截图，但不是我想要的

我在SO和Web上尝试了很多方法，但似乎没有任何效果。我会从外部添加一些CSS，但是我觉得它的响应速度不如预期。我一定忽略了一些微不足道的东西。

我在做什么错了？

Bootstrap

Answer 1

从您的html来看，该表单已应用float: right;样式，这导致了奇怪的行为。

我建议改用flexbox：

footer {
  display: flex;
  width: 100%;
}

form {
  display: flex;
  align-items: center;
  margin-left: auto;
}

<footer>
  <div>
    <img src="https://via.placeholder.com/140x100">
    <img src="https://via.placeholder.com/140x100">
  </div>
  <form>
    <input type="text">
    <input type="submit" value="submit">
  </form>
</footer>

Answer 2

用图像将div和form包装成一个div。并同时使用display: inline-block和float: left。如果没有任何效果，请尝试将form包裹在另一个div上，并在其中放置inline-block。

请参见sample code