右对齐表格

Question

如何在这段代码中右对齐表格？

HTML

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@500&display=swap');

* {
  font-family: "Noto Sans", sans-serif;
  font-weight: 500;
}

.no-outline {
  outline: none;
}

.no-select {
  user-select: none;
}

.form-select {
  width: 130px;
  height: 40px;
}

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
        crossorigin="anonymous"></script>
    <link rel="stylesheet" href="style.css">
    <title>typing</title>
</head>

<body class="bg-light">
    <div class="position-absolute top-50 start-50 translate-middle">
        <div class="d-flex align-items-center">
            <span class="fs-1 no-select" id="text">Lorem</span>
            <select class="form-select float-end"> <!-- right align this form -->
                <option selected>word</option>
                <option>sentence</option>
            </select>
        </div>
        <input type="text" class="bg-light fs-1 border-0 border-bottom no-outline" id="input">
    </div>
    <script src="script.js"></script>
</body>

</html>

我正在使用 bootstrap 5.0 版，所以请尽可能使用 Bootstrap。不需要支持IE！

Answer 1

您可以将 justify-content-between 添加到父级 d-flex div:

<div class="d-flex align-items-center justify-content-between"> <!-- set flex item alignment here -->
    <span class="fs-1 no-select" id="text">Lorem</span>
    <select class="form-select float-end"> <!-- this gets right-aligned if container has "between" justification -->
        <option selected>word</option>
        <option>sentence</option>
    </select>
</div>

由于某种原因，它无法在堆栈片段中正确加载，但这是在本地提供时的样子：

右对齐表格

RIght align form

html

css

forms

bootstrap-5