html - 如何使用 CSS3 flexbox 对齐 HTML 标签？

Question

我已经设置了一个代码笔，所以你可以看到我想要的东西。点此打开代码笔:https://codepen.io/tbellmer/pen/RdxBdQ

我在这方面比较陌生，虽然形式很实用，但我需要美学方面的帮助。我想让 Action: 和 Comment: 标签右对齐。我正在尝试使用最现代的技术，所以不想使用表格或 float 。

我的代码使用一个 flexbox 来包含一个 aside 部分和 main 部分。我可以使用 flexbox 或 grid 来做我想做的事吗？另请注意，我对一些垂直间距使用了

，我怀疑还有更好的方法来做到这一点。

非常感谢您的帮助!

<div class="container">
  <div class="flex-grid">
    <aside class="col sidebar">
      <p class = 'ctr'>Welcome</p>
    </aside>
    <section class="col main">
      <h1 class='ctr'>Title</h1>
      <hr>
      <form action = '#'>
        <label for = 'combo'>Action: </label>
        <select id = 'combo' name = 'response' required>
          <option value = ''>--none--</option>
          <option value = 'A'>Approved</option>
          <option value = 'R'>Rejected</option>
        </select>
        <p></p>   <!-- has to be a better way to get space -->
        <!-- want to have both Action: and Comment: labels line up to right -->
        <label for = 'comment'>Comment: <label>
        <input type=text id='comment' size='40' name='comment'>
        <p></p>
        <input class = 'button' type = 'submit' value = 'Submit' id = 'submit'>
        <input class = 'button' type = 'reset'  value = 'Cancel'>
      </form>
    </section>
  </div>
</div>

Answer 1

您可以创建一个 div在form里面就像我在下面做的那样标记并添加一个带有

的类

CSS

.display-align {
    display: grid;
    grid-template-columns: max-content max-content;
    grid-gap:5px;
}

HTML

<form>
    <div class="display-align">
        <div>
            <label for = 'combo'>Action: </label>
            <br><br>
            <label for = 'comment'>Comment: <label>
        </div>
        <div>
            <select id = 'combo' name = 'response' required">
                <option value = ''>--none--</option>
                <option value = 'A'>Approved</option>
                <option value = 'R'>Rejected</option>
            </select>
            <br><br>
            <input type=text id='comment' size='40' name='comment'>
        </div>
    </div>
    <br>                
    <div>
        <input class = 'button' type = 'submit' value = 'Submit' id = 'submit'>
        <input class = 'button' type = 'reset'  value = 'Cancel'>
    </div>
</form>

您可以使用 <br>标记来换行或仍然使用 <p> .

但我可以建议您改用它吗(它基本上相同，但不同，哈哈)。 我在此代码中使用相同的 CSS 类。

<form>
    <fieldset style="max-width: 400px;">
        <legend>Title</legend>
        <div class="display-align">
            <div>
                <label for = 'combo'>Action: </label>
                <br><br>
                <label for = 'comment'>Comment: <label>
            </div>
            <div>
                <select id = 'combo' name = 'response' required">
                    <option value = ''>--none--</option>
                    <option value = 'A'>Approved</option>
                    <option value = 'R'>Rejected</option>
                </select>
                <br><br>
                <input type=text id='comment' size='40' name='comment'>
            </div>
        </div>
        <br>            
        <div>
            <input class = 'button' type = 'submit' value = 'Submit' id = 'submit'>
            <input class = 'button' type = 'reset'  value = 'Cancel'>
        </div>
    </fieldset>
</form>