Мне нужно создать форму, как показано на этом рисунке:
Я не уверен, возможно ли вообще использовать html.
Проблема в том, что я не могу изменить ширину надписей так, чтобы она точно соответствовала ширине содержимого
Я пробовал это с таблицами, а также со списком ul.
Таблицы имеют проблему с размером таблицы и перечисляют проблему выравнивания.
Я не предпочитаю так или иначе. Я просто хочу, чтобы это сработало.
Есть ли способ сделать это?
редактировать:
Html:
<form>
<table>
<tr><td>NAAM</td><td class="rechts"><input type="text" name="naam" /></td></tr>
<tr><td>VOORNAAM</td><td class="rechts"><input type="text" name="voornaam" /></td></tr>
<tr><td>E-MAIL</td><td class="rechts"><input type="text" name="voornaam" /></td></tr>
<tr><td></td><td><input type="radio" name="vraag" value="vraag" /> VRAAG
<input type="radio" name="vraag" value="nieuwsbrief" /> NIEUWSBRIEF<td></tr>
<tr><td></td><td class="rechts"><textarea rows="4" cols="50"></textarea></td></tr>
<tr><td></td><td class="rechts"><input type="submit" value="Verzenden" /></td></tr>
</table>
</form>
CSS:
#contactleft{ /* So: This is a div floating to the left with the adress etc */
width: 250px;
margin-top:50px;
padding-top:10px;
float:left;
border-right: solid #b5b5b5 2px;
}
#contactleft p{
margin-left:50px;
font-family: Ubuntu Condensed;
font-size: 14pt;
line-height:1.5em;
}
#contactright{ /* So: This is the div where the form is in. */
float:right;
width:690px;
margin-top:50px;
padding-bottom: 20px;
font-family: Ubuntu Condensed;
font-size: 14pt;
line-height:1.5em;
list-style-type:none;
}
#contactright form{
padding-top: 10px;
padding-left: 50px;
}
#contactright form table{
}
#contactright form table td{
}
#contactright .rechts{
width: 100%;
padding-right: 150px;
}
#contactright .rechts input{
width: 100%;
}
Редактировать: Я сделал это безобразно. Я просто создал новую таблицу для каждой строки, и это дало нужный мне результат.