Как выровнять HTML-метки с помощью CSS3 flexbox? - PullRequest
Новая
       38

Как выровнять HTML-метки с помощью CSS3 flexbox?

0 голосов
/ 14 марта 2019

Я установил кодовую ручку, чтобы вы могли видеть, что я хочу.Нажмите здесь, чтобы открыть кодовую ручку: https://codepen.io/tbellmer/pen/RdxBdQ

Я относительно новичок в этом вопросе, и хотя форма функционирует, мне нужна помощь в эстетике.Я хотел бы, чтобы оба действия : и Комментарий: метки были выровнены по правому краю.Я пытаюсь использовать самые современные методы, поэтому не хочу использовать стол или поплавок.

Мой код использует flexbox для выделения дополнительного раздела и основного раздела.Могу ли я использовать flexbox или сетку, чтобы делать то, что я хочу?Также обратите внимание, что я использовал

для некоторого расстояния по вертикали и подозреваю, что есть лучший способ сделать это также.

Ваша помощь будет принята с благодарностью! 

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

1 Ответ

0 голосов
/ 14 марта 2019

Вы можете создать 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>.

Но я могу предложить вам использовать это вместо (в основном это то же самое, но другое lol).Я использую тот же класс 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>
...