如何在html中将列右对齐

多莉

我已经创建了一个包含一行输入字段的网格，现在我需要在它们右侧创建一些按钮，但是我无法弄清楚这一点。

这是用于响应式设计的，我找不到一些资源来解释我做错了什么。

<div class="container">
    <div class="row">
        <div class="col-12 col-sm-8 col-md-3 col-lg-7">
            <h1>Select</h1>
            <div class="form-group">
                <input class="form-input " placeholder="balal" id="input-type-text2"
                value="" name="input-type-text" type="text">
            </div>
            <div class="form-group">
                <input class="form-input " placeholder="r" id="input-type-text4"
                value="" name="input-type-text" type="text">
            </div>
            <div class="form-group">
                <input class="form-input " placeholder="lalala" id="input-type-text6"
                value="" name="input-type-text" type="text">
            </div>
        </div>
        <div class="col-24 col-sm-16 col-md-6 col-lg-14">
            <div class="form-group">
                <input class="form-input " placeholder="align to the right" id="input-type-text6"
                value="" name="input-type-text" type="text">
            </div>
        </div>
    </div>
</div>

我希望最后一个列向右对齐

鲁宁

CSS Grid 非常适合响应式布局。

您可以声明.containeras display: grid，然后可以定义as的列和行.container：

grid-template-columns: 50% 50%
grid-template-rows: 100%

工作示例：

.container {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 100%;
}

.right {
justify-self: end;
}

input[type=text] {
display: block;
}

<h1>Select</h1>
<div class="container">
<div class="container-column left">
<input type="text" placeholder="balal" />
<input type="text" placeholder="r" />
<input type="text" placeholder="lalala" />
</div>

<div class="container-column right">
<input type="text" placeholder="align to the right" />
</div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。