Я хочу показать:
Name [Textbox]
Age: [Textbox]
BlahBlahCatfish: [Textbox]
но если я просто наброшу код, он будет выровнен так же, как и выстроенный выше.
Я хочу, чтобы он был выровнен следующим образом:
Name: [Textbox]
Age: [Textbox]
BlahBlahCatfish: [Textbox]
По порядку я бы использовал таблицу, но я пытаюсь избавиться от этой привычки и использовать прекрасный CSS. Идеи о том, как это сделать без миллиардов дивизий и прочее?
Вот сайт, который я сделал, который делает это.
http://acm.cs.kent.edu/contact/form.php
В основном это похоже на
<p>
<label for="someTextBox" >Text</label>
<input type="text" id="someTextBox" />
</p>
p label {
display: inline-block;
width: x;
}
p input {
width: y;
}
Я использую 960 Grid System для обработки макета на основе формы, в частности, я нашел Fluid 960 Grid System наиболее полезно.
Это простой и структурированный подход к макету, стоит потратить немного времени на изучение этого, так как он сэкономит вам столько времени в будущем.
Другим удобным инструментом является Gridder bookmarklet к макету поддержки.
Существуют и другие рамки CSS, такие как Blueprint, которые одинаково хороши.
используйте "левый" и "правый" классы и сделайте их float:left и float:right соответственно. Затем текст будет выглядеть в <div class="right">, а имя атрибута - в <div class="left">.