复杂表单元素对齐

Question

我正在使用primeng css，我希望按钮和输入水平对齐（结束） 我不想将标签与按钮对齐

jsfiddle

<div class="ui-g ui-fluid dashboard">
    <div class="ui-g-12">
        <div class="ui-g-12 ui-md-2">
            <label for="year"> Year</label>
            <input type="text" name="year" >
        </div>
         <div class="ui-g-12 ui-md-2">
            <label for="month"> Month</label>
            <input type="text" name="month" >
        </div>
        <div class="ui-g-12 ui-md-1">
            <input type="button" value="Search" id="myButton">
        </div>
   </div>
</div> 

Answer 1

使用 align-self-end 类（bootstrap 4 / flexbox）将按钮垂直对齐到列的底部。

<div class="form-group col-md-2 align-self-end"><button class="btn btn-primary" id="btn" name="btn" type="submit">Submit</button></div>

也可访问Here 进一步查询

你也可以使用align-self: flex-end;

在你的编译器上使用它而不是在 Fiddle 上