如何使按钮内联？

Question

我有两个按钮，一个是单行文本，另一个是两行文本。这些按钮不是内联的。我怎样才能让它内联？

我尝试使用不同的 css 风格来修复它。

类似这样：

button{
  height:50px;
}

<button>Single Line</button>
<button>Multiline<br>Line</button>

Answer 1

左边的按钮.btnVideo是top: 8px;写在/* top: 8px */注释里的，没有执行。如果使用 google chrome.

，您可以使用检查元素轻松检查

Answer 2

试试 vertical-align:middle;

button{
  height:50px;
  vertical-align:middle;
}

 <div class="mainContainer">
        <button class="actionBtn btnVideo">Take a Video</button>
        <button class="actionBtn btnEvent">Attend Event<br><span>(Check-In/Check-Out)</span></button>
    </div>

button{
  height:50px;
  vertical-align:middle;
}

<button>Single Line</button>
<button>Multiline<br>Line</button>

如何使按钮内联？

How to make button inline?

css

inline

button