时间戳

首页 > 解决方案 > 复杂表单元素对齐

html - 复杂表单元素对齐

问题描述

我正在使用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>

标签： htmlcss

解决方案

使用 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>

另请访问此处进行进一步查询

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

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

推荐阅读