Question

I’m really not that good at CSS, and I want to know how to correctly style a form in a manner that it puts each single text input and label in a line. like this :

<label for="input1">...</label>
<input type="text" id="input1"/>
<label for="input2">...</label>
<input type="text" id="input2"/>
<label for="input3">...</label>
<input type="text" id="input3"/>
<label for="input3">...</label>
<input type="text" id="input3"/>

and it would be shown in the webpage like :

(label)(input)
(label)(input)
(label)(input)
(label)(input)

Answer 1

I recommend this tutorial by A List Apart about Prettier Accessible Forms. You can also use a definition list with some custom styling, e.g.,

<dl><dt><label></label></dt>
  <dd><input></dd></dl>

And something like:

dl dt {
    float: left;
    width: 8em;
}

Edit: to sum up the A List Apart article, they suggest you put form fields in an ordered list ol. Labels are displayed as inline-block so they appear horizontally next to their associated fields.