为什么这些不同的按钮类型没有排成一行？答案

【问题标题】：Why aren't these different button types lining up?为什么这些不同的按钮类型没有排成一行？
【发布时间】：2015-08-24 04:00:32
【问题描述】：

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

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

【问题讨论】：

verrical-align: top; 是你想要的

标签： html css button alignment

【解决方案1】：

为您的按钮添加“垂直对齐”属性。

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

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

【讨论】：