Выравнивание HTML-формы, чтобы все метки были связаны

Question

Выравнивание HTML-формы, чтобы все метки были связаны

Я пытаюсь выровнять форму так, чтобы все метки начинались одинаково, а затем текстовые поля начинались в одном месте. При использовании float: left все метки начинаются в одной и той же точке, но текстовые поля просто следуют, поэтому текстовые поля все перепутаны. Есть ли способ, который я могу установить, чтобы все текстовые поля начинались в определенной точке на странице. Я использую CSS, но не уверен, какие атрибуты мне нужно использовать. Форма у меня есть;

<form method="POST" action="editloaninfo.php">

<div id="editp"Username:
<input type="text" name="username" autocomplete="off" size="18" value="<?php  echo $username; ?>"></div>

<br>

<div id="editp"Product:
<select name="product" style="width: 150px">
<option value="<?php echo $product;?>">
<option value="Laptop">Laptop</option>
<option value="Keyboard">Keyboard</option>
</select></div>

Div для редактирования есть;

#editp {

font-family: Tahoma, Geneva, sans-serif;
font-style: italic;
font-size: 80%;
margin-right: 100px;
float: left;
}

1

alignment css html php

Решение

Другие решения

Закройте открывающие теги div. Вы скучаете по >,

Не используйте встроенные стили

Используйте ярлыки формы!

Затем просто используйте встроенный блок и ширину, чтобы контролировать расположение меток на входах:

form {
width: 100%;
}
label {
width: 30%;
display: inline-block;
}
input,
select {
width: 60%;
display: inline-block;
margin: 0;
}

<form method="POST" action="editloaninfo.php">

<div id="editp">
<label for="username">Username:</label>
<input type="text" name="username" autocomplete="off" value="<?php  echo $username; ?>">
</div>

<br>

<div id="editp">
<label for="product">Product:</label>
<select name="product">
<option value="<?php echo $product;?>">
<option value="Laptop">Laptop</option>
<option value="Keyboard">Keyboard</option>
</select>
</div>

</form>

0

Источник

Accepted Answer

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

Смотрите эту скрипку — https://jsfiddle.net/yya26ark/

HTML:

<label>Example Label:</label><input type="text">
<label>Example:</label><input type="text">
<label>Label Ex:</label><input type="text">
<label>Something Else Here:</label><input type="text">

CSS:

label { display:inline-block; width:200px; }
input { width:120px; }

2