在一行中对齐 href 按钮和图像按钮

Question

我在 div 中的 html 中定义了以下 2 个按钮：

<div class="button-div" align="center">

            <a id="cancel" style="background-color: #4b82c3;color: white;display:inline;text-decoration: none !important; font-size: 12px; padding: 10px 11px;margin: 8px 0;border: 1px;border-radius: 20px;" href="/">Cancel</a>

            <input type="image" id="btn" src="/static/images/submit-button.png" value="Submit" alt="Submit" width="90" height="40">

          </div>

不知何故，使用 a tag 创建的按钮与定义为图像的按钮不对齐。如何将这些按钮对齐？

PS：如果两个按钮都定义为图像，我不会遇到这个问题。

Answer 1

使用 css flex 属性将您的元素对齐在一行中。

Answer 2

尝试将 display:flex 与 flex-direction: row 一起使用：

<div class="button-div foo" align="center">
</div>

CSS:

.foo {
  display: flex;
  flex-direction: row;
}

在一行中对齐 href 按钮和图像按钮

Align href button and an image button in a single line

html

css

href