Делаю так
<div>
<span>Логин</span>
<input type="text">
</div>
<div>
<span>Пароль</span>
<input type="text">
</div>
и получается такая форма
Инпут рядом с логином почему-то длиннее
как выровнять их?
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуУ вас span строчный элемент один шириной в 5 букв,другой в 6 букв.Соотвественно один шире другого. span задайте строчно блочную модель (inline-block) ,оттолкните правый инпут маргином в право margin-right: ваше значение.
Сделайте такую форму -
<div>
<span>Логин</span>
<input style="margin-left: 8px" type="text">
</div>
<div>
<span>Пароль</span>
<input type="text">
</div>
И играйтесь со стилями, ставьте margin разные , и подбивайте в соответствии с вашей идеей
Вариант на flexbox.
Продробнее на MDN
div {
width: 235px;
display: flex;
justify-content: space-between;
padding: 10px;
}
<div>
<span>Логин</span>
<input type="text">
</div>
<div>
<span>Пароль</span>
<input type="text">
</div>