Flex 项目与标签而不是与输入框对齐

Question

我有这样的东西

<div class="d-flex">
    <div class="d-flex flex-column">
        <label>ID</label>
        <input class="form-control form-control-sm" style="width: 13rem;" />
    </div>
    <select class="form-control" style="width: 13rem;">
        <option value="0">Select...</option>
        <option value="1">Other 1</option>
        <option value="2">Other 2</option>
    </select>
</div>

我的 select 与 ID 标签而不是输入对齐。有什么方法可以使它与输入对齐而不必在 select?

顶部放置标签

Answer 1

我已经编辑了您的代码，我认为这是一个很好的解决方案：

<div class="d-flex">
    <div class="d-flex flex-column">
        <label>ID</label>
        <input class="form-control form-control-sm" style="width: 13rem;" />
    </div>
    <div class="d-flex flex-column">
        <label style="color: transparent;">ID</label>
        <select class="form-control" style="width: 13rem;">
            <option value="0">Select...</option>
            <option value="1">Other 1</option>
            <option value="2">Other 2</option>
        </select>
    </div>
</div>

我认为您正在使用 bootstrap，所以我不知道 bootstrap 是否会干扰我的代码，但无论如何都要尝试一下。

Answer 2

您可以将 align-items-end 添加到弹性容器（第一个示例）。

如果您希望它们正确排列，您还需要制作 select 元素 form-control-sm（第二个示例）。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex align-items-end">
    <div class="d-flex flex-column">
        <label>ID</label>
        <input class="form-control form-control-sm" style="width: 13rem;" />
    </div>
    <select class="form-control" style="width: 13rem;">
        <option value="0">Select...</option>
        <option value="1">Other 1</option>
        <option value="2">Other 2</option>
    </select>
</div>
<hr />
<div class="d-flex align-items-end">
    <div class="d-flex flex-column">
        <label>ID</label>
        <input class="form-control form-control-sm" style="width: 13rem;" />
    </div>
    <select class="form-control form-control-sm" style="width: 13rem;">
        <option value="0">Select...</option>
        <option value="1">Other 1</option>
        <option value="2">Other 2</option>
    </select>
</div>

Flex 项目与标签而不是与输入框对齐

Flex item aligns with label instead of with an input box

css

flexbox

bootstrap-4