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

Question

Я хочу отобразить:

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

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

Я хочу, чтобы он выстроился так:

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

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

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

Answer 2

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

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

Еще одним удобным инструментом является букмарклет Gridder , помогающий макету.

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

Answer 3

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