Последние записи
- Взаимодействие через командную строку
- Перенести программу из Delphi в Lazarus
- Определить текущую ОС
- Автоматическая смена языка (раскладки клавиатуры)
- Сравнение языков на массивах. Часть 2
- wprintf как напечатать кириллицу
- Взаимодействие через командную строку
- Сравнение языков на массивах. Часть 1
- Сравнение языков по скорости
- Чтение огромных xml-файлов
Интенсив по Python: Работа с API и фреймворками 24-26 ИЮНЯ 2022. Знаете Python, но хотите расширить свои навыки?
Slurm подготовили для вас особенный продукт! Оставить заявку по ссылке - https://slurm.club/3MeqNEk
Online-курс Java с оплатой после трудоустройства. Каждый выпускник получает предложение о работе
И зарплату на 30% выше ожидаемой, подробнее на сайте академии, ссылка - ttps://clck.ru/fCrQw
24th
Окт
Вёрстка табличная vs. CSS
Posted by obzor under HTML
Сегодня мне потребовалось решить несколько проблем при вёрстке собственной простенькой формы авторизации для моего очередного проекта.
Предо мной стояло всего две задачи:
1 — форма должна быть отцентрирована по горизонтали и по вертикали;
2 — поля ввода логина и пароля должны быть выровнены относительно друг друга, а лейбы с подписями должны «обтекать» эти поля ввода.
При решении первой задачи я нарвался на помесь CSS и использования тегов <table> и <div> …
Как можно реализовать поставленную мною задачу более «правильно» что ли ?
Чем меньше лишних тегов, тем лучше.
На данный момент самый кошерный способ для такой задачи — это гриды. А отцентрировать можно любым удобным способом, но чтобы не вводить новые блоки, удобнее всего флексом.
<form class="login-form" action="index.php" method="post"> <label class="login-form_label" for="login">Логін:</label> <input class="login-form_value" name="login" id="login" type="text" size="15" maxlength="15"> <label class="login-form_label" for="password">Пароль:</label> <input class="login-form_value" name="password" id="password" type="password" size="15" maxlength="15"> <input class="login-form_submit" type="submit" value="Увійти"> </form>
Можно например так:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
form{
width: 15%;
margin:50vh auto;
display: table;
}
input{
display: table-column;
text-align: right;
}
span{
display: table-row;
}
label{
display:table-cell;
text-align: left;
}
</style>
</head>
<body>
<form action="index.php" method="post">
<span>
<label>Логін:</label>
<input name="login" type="text" size="15" maxlength="15">
</span>
<br>
<span>
<label>Пароль:</label>
<input name="password" type="password" size="15" maxlength="15">
</span>
<br>
<input type="submit" value="Увійти">
</form>
</body>
</html>
Похожие статьи
Купить рекламу на сайте за 1000 руб
пишите сюда - alarforum@yandex.ru
Да и по любым другим вопросам пишите на почту
пеллетные котлы
Пеллетный котел Emtas
Наши форумы по программированию:
- Форум Web программирование (веб)
- Delphi форумы
- Форумы C (Си)
- Форум .NET Frameworks (точка нет фреймворки)
- Форум Java (джава)
- Форум низкоуровневое программирование
- Форум VBA (вба)
- Форум OpenGL
- Форум DirectX
- Форум CAD проектирование
- Форум по операционным системам
- Форум Software (Софт)
- Форум Hardware (Компьютерное железо)