html - css中元素的水平对齐

Question

我是 css 的新手，不知道如何解决这个小问题。我的 html 中有以下页脚:

在代码中:

 <footer>
        <a href="#" class="btn-reset-search-form" data-bind="click: ..." data-i18n="..."></a>
        <button class="btn btn-primary btn-sm btn-submit-search" data-bind="click: ..." data-i18n="..."></button>
 </footer>

正如您在下一张图片中看到的那样，红线表示水平对齐(我猜):

但我想要实现的是它们像这样对齐:

换句话说，重置链接应该与提交按钮处于同一级别。我怎样才能做到这一点？提前致谢!

Answer 1

使用 vertical-align:bottom; 和 display:inline-block;

请参阅以下代码段。

footer{
  border:1px solid black;
  
}
button{
  height:40px;
  vertical-align:bottom;
  display:inline-block;
}

<footer>
  <a href="">Reset</a>
  <button>Submit</button>
</footer>