Can't figure out how to code my css

Question

Hi,

I'm a new poster in stackoverflow. The community seems really nice so I'll go ahead and post my question.

I'm trying to style a asp.net MVC2 form so that instead of having all the fields on a strait line, I would like to have it like so:

Label: Text field
Label: Text field

I know you could do that with a table but I would like to use CSS to accomplish that. I know a little bit about css but not enough to figure out what to do. The only thing I came close to was to but my fields as a unorder list then styling the li item.

Thank you for your help!

Answer 1

Give the labels a class & add float:left to it.

There are plenty of CSS forms tutorials around if you get stuck.

Answer 2

There are likely dozens of ways to do it. If you're just trying to get a line break between your field / value pairs, wrap each line's worth of code in a <div> tag. Divs are block elements, meaning that by default there's a line break before and after them. Labels by default are inline, so you don't need to do anything special to get them to line up next to the text fields.

<div>
    <label>Label:</label><input type=text />
</div>
<div>
    <label>Label:</label><input type=text />
</div>