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

Question

Я пытаюсь выровнять свою форму так, чтобы все метки начинались одинаково, а затем также начинались текстовые поля в одном и том же месте. При использовании float: все ярлыки начинаются с одной точки, но текстовые поля, которые просто следуют за текстовыми полями, все испорчены. Есть ли способ, которым я могу установить так, чтобы все текстовые поля начинались с определенной точки на странице. Я использую 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> 

Этот раздел предназначен для редактирования;

#editp { 

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

Answer 1

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

Смотрите эту скрипку - 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; } 

Answer 2

Закрыть теги 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>