开发者

How do I line up my textboxes without using a table? html/css

I want to display:

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

but if I simply plonk the code in, it gets lined up exactly as its lined up above.

开发者_Go百科

What I want is for it to be lined up like this:

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

Ordinarly I would use a Table but I am trying to get out of that habit and use lovely CSS. Ideas of how to do this without billions of divs and stuff?


Here is a site I did that does that.

http://acm.cs.kent.edu/contact/form.php

Basically its like this

<p>
    <label for="someTextBox" >Text</label>
    <input type="text" id="someTextBox" />
</p>

p label {
    display: inline-block;
    width: x;
}
p input {
    width: y;
}


I use the 960 Grid System to handle form based layout, in particular I found the Fluid 960 Grid System most useful.

It's a simple and structured approach to layout, worth investing a little time to learn this as it will save you so much time in the future.

Another handy tool is the Gridder bookmarklet to aide layout.

There are other CSS frameworks such as Blueprint which are equally as good.


use a "left" and a "right" class, and make them float:left and float:right, respectively. The text would then go in a <div class="right">, and the attribute name in a <div class="left">.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜