html - 水平对齐除标签之外的选择字段

Question

如何对齐除标签之外的选择框，我想将其保留在左上角？

<form class="form-inline">
    <div class="form-group">
        <label for="SelectDate">Date of Event</label>
        <select class="form-control" id="SelectMonth">
            <option>Jan</option>
            <option>Feb</option>
            <option>Mar</option>
        </select>
        <select class="form-control" id="SelectDay">
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select>
        <input class="form-control" type="Number" placeholder="Year">
    </div>
</form>

这段代码使它们全部对齐，但我试图让它看起来像:

日期

[月][日][年]不

日期[月][日][年]

谢谢你们。

Answer 1

您可以将此样式添加到您的标签中:

.form-inline label[for="SelectDate"] {
    display: block;
}

现在它将按照您的需要显示:https://codepen.io/anon/pen/aLdZgX