为什么这些不同的按钮类型不排列在一起？

Question

我的页面上有一个和一个。但是，我似乎无法让这些按钮对齐。

html

<div class="doubleButtonContainer">
    <button class="moreAnswersButton" name="more_answers" onclick="showAllAnswers()">More answer fields...</button>
    <input type="submit" class="button" name="submit" value="Finish" />
</div>

css

.moreAnswersButton, .button
{
    height: 50px;
    width: 125px;
    text-align: center;
    border-radius: 5px;
    padding: 0;
}

.doubleButtonContainer
{
    height: 70px;
    text-align: center;
    width: 325px;
}

JSFiddle Link

Answer 1

将 'vertical-align' 属性添加到您的按钮中。

.moreAnswersButton, .button
    {
        height: 50px;
        width: 125px;
        text-align: center;
        border-radius: 5px;
        padding: 0;
        vertical-align: bottom;
    }

（值可以是底部、中间或顶部。这是您的喜好）

为什么这些不同的按钮类型不排列在一起？

Why aren't these different button types lining up?

html

css

button

alignment