Сбой вертикального выравнивания тега <input>внутри тега <div> - PullRequest
Новая
       18

Сбой вертикального выравнивания тега <input>внутри тега <div>

0 голосов
/ 08 июля 2019

Я пытаюсь использовать CSS-сетку для размещения тегов div и полей ввода внутри них. Часть, которая продолжает терпеть неудачу, является вертикальным выравниванием. Я перепробовал много предложений, сделанных на онлайн-форумах, но ничего не работает. Для меня важно выровнять поля ввода по нижней части тега div. Буду очень признателен за любую помощь.

Я пробовал vertical-align = "bottom" в непосредственном div, в который входит вход, а также с самим тегом ввода.

Я пытался использовать position = "absolute" с bottom = "0". 


<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                font-family: helvetica;
                font-size: 36px;
                color: white;
            }

            .container {
                display: grid;
                grid-gap: 5px;
                grid-template-columns: [open-paren] 0.5fr [atomic-symbol]1.0fr;
                width: 25%;
                padding: 3px;
                border: 3px solid teal;
                border-radius: 5px;
            }

            .item {
                background-color: teal;
                border-radius: 5px;
                border: 3px solid teal;
                height: 100px;
                vertical-align: bottom;
            }

            .item:nth-child(1) {
                grid-row: 1/5;
                grid-column: open-paren;
                text-align: right;
            }

            .item:nth-child(2) {
                grid-row: 4/9;
                grid-column: atomic-symbol;
            }
        </style>
    </head>
    <body>
        <section class="container">
            <div class="item">
                <p vertical-align="text-bottom">Open</p>
            </div>
            <div class="item">
                <input type="text" vertical-align="bottom">
            </div>
        </section>
    </body>
</html>

Любой элемент, включенный в тег div, выровненный по нижней части шкафа.

1 Ответ

1 голос
/ 09 июля 2019

Я не знаю, правильно ли я понял, но это позиционирует вход вниз по div. 

* {
      padding: 0;
      margin: 0;
    }

    body {
      font-family: helvetica;
      font-size: 36px;
      color: white;
    }

    .container {
      display: grid;
      grid-gap: 5px;
      grid-template-columns: 0.5fr 1fr;
      width: 50%;
      padding: 3px;
      border: 3px solid teal;
      border-radius: 5px;
    }

    .item {
      display: grid;
      align-items: end;
      height: 100px;
      border-radius: 5px;
      border: 3px solid teal;
      background-color: teal;
    }

    .item p {
      text-align: right;
    }
<section class="container">
    <div class="item">
      <p>Open</p>
    </div>
    <div class="item">
      <input type="text">
    </div>
  </section>
...