如何使用 CSS3 flexbox 对齐 HTML 标签？答案

【问题标题】：How to align HTML labels using CSS3 flexbox?如何使用 CSS3 flexbox 对齐 HTML 标签？
【发布时间】：2019-08-04 17:03:10
【问题描述】：

我已经设置了一个 codepen，所以你可以看到我想要的。点击这里打开codepen：https://codepen.io/tbellmer/pen/RdxBdQ

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

我的代码使用 flexbox 有一个备用部分和主要部分。我可以使用 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>

【问题讨论】：

您可以在标签上放置相同的宽度，使其对齐良好，并使输入从一行开始。
您可以重置显示以调整它们的大小，例如 label {display:inline-block;width:5em;text-align:right} 或您想要的任何大小。此处不需要 flexbox，否则该方法就是您为 main 所做的，并且通过 flex 或 width 为每个设置一个宽度
请将其添加到我的 codepen 并查看结果：标签 {display:inline-block;width:5em;text-align:right} - 它不起作用
标签是内联的，您需要重置显示才能调整它们的大小。您从三个规则中取出了 2 个规则......缺少的一个是允许使用另外两个的规则......
我已重置我的 codepen 以按照建议显示所有三个。我删除 display: inline-block 的原因是因为这真的把事情搞砸了。现在查看 codepen 并重新添加。这不是所需的结果。

标签： html css flexbox label alignment

【解决方案1】：

您可以像我在下面所做的那样在form 标记内创建一个div，并使用

添加一个类

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>

【讨论】：