Question

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

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

hsla(0, 0%, 100%, 0)

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

Answer 1

更改class名称

<div class="col-12 col-sm-4 col-md-4">
    <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-12 col-sm-4 col-md-4">
    <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>

Answer 2

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

您可以将.container声明为display: grid，然后可以将.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>

如何在html中将列右对齐

2 个答案: