Как сделать поля логина и пароля друг под другом?

Question

[Евгений Иванов]

https://jsfiddle.net/m93xo0da/2/

Верстаю форму входа.
Поля логина и пароля (дивы в которых содержатся эти поля login-window__elements) ни как не хотят нормально становиться друг под другом. Как их сделать?

Текст логин обернут в див. Этому диву выставлено (display: inline-block; float: left;) т.е отображайся блоком в одну строку и выровняйся влево.

Диву - обертке присвоено значение (margin-top: 20px;) т.е отступи снаружи 20 пикселей. И первый див отступает.
А второй, похоже что нет и наезжает на первый.
Но как так, стиль для оберток един. Второй див должен отступить от первого 20 пикселей и быть под ним.
Как сделать поля логина и пароля друг под другом?

<div class="wrapper">

<div class="login-window">
<div class="login-window__title-text">Вход</div>

<div class="login-window__elements">

<div class="login-window__field-text">Логин</div>
<div class="login-window__input-field">
<input value="" type="text" name="login" size="20">
</div>
</div>

<div class="login-window__elements">

<div class="login-window__field-text">Пароль</div>
<div class="login-window__input-field">
<input value="" type="password" name="password" size="20">
</div>
</div>


<input type="submit" value="Вход" class="login-window__enter-button">


</div>
</div>

.wrapper {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: auto 400px auto;
    grid-template-rows: auto 200px auto;
}

/* Форма логина */
.login-window {
    grid-area: 2 / 2 / 2 / 2;
    background: #17657A;
    padding: 10px;
}



/* Элементы формы */
.login-window__elements {
margin-top: 20px;

}

.login-window__field-text
{
display: inline-block;
    float: left;
}

.login-window__input-field
{
    display: inline-block;
    float: right;
}




.login-window__text-field {
    background: #ffffff;
    color: #000000;
    padding: 4px;
    width: 100%;
}



.login-window__enter-button {
    font-family: Arial;
    font-size: 16px;
    color: #ffffff;
    border: 0px;
    text-decoration: none;
    cursor: pointer;
    background: #4E7A5E;
    width: 80px;
    height: 30px;
}




.login-window__title-text {
    font-family: Arial;
    font-size: 18px;
    color: #ffffff;
    text-align: center;
}


/* Элементы формы */
.login-window__field-text {
    font-family: Arial;
    font-size: 16px;
    color: #ffffff;

}

Comments

[Ankhena]

1. Гремучая смесь гридов и флоатов.
Уж если вы современные верстальщик и уже используете гриды, то откуда же прилетели флоаты? Их для сеток не используют уже много лет.
2. У вас перебор div'ов. Почитайте про семантику.
Форма это тег form.
Её заголовок это h2 (или какой у вас получится по контенту страницы).
Подписи к инпутам это label.
div вокруг инпута просто лишний.

Дальше расставляете всё это тем же гридом или флексом.

[Ankhena]

Такая разметка имеет право на существование (не будут бить "фейс об тейбл" если так верстать в коммерческих проектах)?

https://jsfiddle.net/Lveh6aok/

Нет не имеет. Бить будут.
Из того, что я написала выше вы заменили только form и даже не убрали флоаты.

В песочнице jsfiddle в каждом окошке с кодом есть волшебные кнопочки tidy - они сделают код читабельным.

[Ankhena]

Евгений Иванов, Как-то так хотя бы https://jsfiddle.net/yro9kdxp/

[Евгений Иванов]

Ankhena, спасибо, посмотрел.
Исправил свой код, согласно вашим рекомендациям. Сетку сделал свою.
https://jsfiddle.net/s12anjkp/

1) С дивами переборщил. Тут явная ошибка.
2) Использовать гриды и флоаты (не как я, а органично) рекомендуют многие верстальщики в интернете.
Например грид делит страницу на меню и контент. А меню выравнивает свои пункты флоатом.
Это не я придумал - просто говорю что показывают на ютубе довольно популярные каналы.

2) Заголовок формы h2. Не очень понятно, почему h2.
Из истории веба - все эти заголовки и прочее использовались для оформления научных документов. Изначально CSS использовали ученые (Дэвид Макфарланд, большая книга css). Ну а потом стали использовать все.
Я не могу сказать, что заголовок формы, это как заголовок документа. Или что это вообще заголовок.

Кстати, я потратил 30 минут позиционируя его в грид. У него оказывается margin по умолчанию не 0.
Вот я и думал - что h2 не встает ровно по сетке.

[Ankhena]

Евгений Иванов,

2) Использовать гриды и флоаты (не как я, а органично) рекомендуют многие верстальщики в интернете.
Например грид делит страницу на меню и контент. А меню выравнивает свои пункты флоатом.
Это не я придумал - просто говорю что показывают на ютубе довольно популярные каналы.

Какого года эти каналы и верстальщики?

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

2) Заголовок формы h2. Не очень понятно, почему h2.
Из истории веба - все эти заголовки и прочее использовались для оформления научных документов. Изначально CSS использовали ученые (Дэвид Макфарланд, большая книга css). Ну а потом стали использовать все.
Я не могу сказать, что заголовок формы, это как заголовок документа. Или что это вообще заголовок.

Почитайте побольше про семантику и доступность.
Я поставила h2 просто так. Вы должны поставить тот номер, который получается по вложенности на вашей странице.

Кстати, я потратил 30 минут позиционируя его в грид. У него оказывается margin по умолчанию не 0.
Вот я и думал - что h2 не встает ровно по сетке.

Да, у многих тегов есть свои свойства по умолчанию: отступы, размеры, шрифт и т.д.
Постепенно изучите.

Сетку сделал свою.

Вы задаете фиксированную высоту строкам.
В вебе очень редко задают высоту. Если нужно, то ограничивают её. Мы никогда не знаем сколько контента будет в реальном сайте, не поставит ли пользователь увеличенный шрифт и т.д. При фикс высоте всё развалится.
Можно задавать высоту, например, если нужно вписать картинку с неизвестными размерами в какую-то область.

В данном случае аналогично и с шириной. Вставьте слово подлиннее и посмотрите что будет. Длинное слово не влезет, для двух слов будет перенос, хотя вполне можно и чуть-чуть ужать инпуты.
Ограничение максимальной и минимальной ширины вместо фиксированной, в данном случае, улучшит качество верстки.

---
0. В песочнице jsfiddle есть кнопочки tidy (в других песочницах аналогичные функции), которые форматируют код в читаемый вид лесенкой. Если хотите, чтобы кто-то смотрел ваш код, форматируйте его.

1. У вас лейблы не привязаны к своим инпутам. В моем варианте были привязаны.

2. Кнопки удобнее делать тегом button. input submit это устаревший вариант, когда не было button, который остался для совместимости.
У button есть псевдоэлементы, в него можно вкладывать другие теги => его проще стилизовать. Текст на кнопке является содержимым тега, а не value.

И зачем её абсолют, там же грид сетка, по которой кнопка прекрасно встает на своё место.

3. У вас задан один шрифт, Arial, без указания семейства. А это значит, что если у пользователя вдруг не будет шрифта, то браузер отрисует его каким-то другим, причем возможно, вообще не таким, например, с засечками.
Если на сайте шрифт одинаковый или инпуты, кнопки, текстареа используют тот же шрифт, что и текст, то разумнее писать inherit. Чтобы не было мучительно больно, когда нужно будет изменить шрифт.

4. user-select: none; с этим вообще аккуратнее.

5.

-webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;

Пользуйтесь автопрефиксером и ну нужно таскать это в песочницы. https://autoprefixer.github.io/ru/

Answer 1

[Дмитрий]

Try add styles in your css file

.login-window__elements::after {
content: "";
clear: both;
display: table;
}