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">
.
精彩评论