Как выстроить мои текстовые поля без использования таблицы? HTML/CSS

Я хочу показать:

Name [Textbox]
Age: [Textbox]
BlahBlahCatfish: [Textbox]

но если я просто наброшу код, он будет выровнен так же, как и выстроенный выше.

Я хочу, чтобы он был выровнен следующим образом:

Name:            [Textbox]
Age:             [Textbox]
BlahBlahCatfish: [Textbox]

По порядку я бы использовал таблицу, но я пытаюсь избавиться от этой привычки и использовать прекрасный CSS. Идеи о том, как это сделать без миллиардов дивизий и прочее?

Ответ 1

Вот сайт, который я сделал, который делает это.

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;
}

Ответ 2

Я использую 960 Grid System для обработки макета на основе формы, в частности, я нашел Fluid 960 Grid System наиболее полезно.

Это простой и структурированный подход к макету, стоит потратить немного времени на изучение этого, так как он сэкономит вам столько времени в будущем.

Другим удобным инструментом является Gridder bookmarklet к макету поддержки.

Существуют и другие рамки CSS, такие как Blueprint, которые одинаково хороши.

Ответ 3

используйте "левый" и "правый" классы и сделайте их float:left и float:right соответственно. Затем текст будет выглядеть в <div class="right">, а имя атрибута - в <div class="left">.