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

Question

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

我相对较新，虽然表格很实用，但我需要美学方面的帮助。我想同时将Action：和Comment：标签对齐。我试图使用最现代的技术，所以不想使用表或浮动。

我的代码使用flexbox来显示旁边部分和主要部分。我可以使用flexbox或网格来做我想要的吗？还要注意我用了一个

for some vertical spacing and suspect there is a better way to do this as well.

非常感谢您的帮助！

<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>