css floating 2 inputfields in a form

问题

i have the following problem understanding css.

i have a registration form. in that form i use a fieldset. now i would like to position two input fields beside for each row. there also should be a lable for each field above.

so what i like to achieve is that:

    label 1                         label 2
    _______________                 _______________ 
   (_______________)               (_______________)

    label 3                        label 4
    _______________                 _______________ 
   (_______________)               (_______________)

i`m new to css and have some problems understanding float & clear.

up to this point i have the following structure:

           _______________              
label 1   (_______________)             
           _______________              
label 2   (_______________) 
           _______________              
label 3   (_______________) 
           _______________              
label 4   (_______________)

and here are my thoughts:

i have the fieldset set to specific height and width:

fieldset { height: 330px; width: 550px;}

after that i used to set information for my label and input design:

label { font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #ECECEC;
    text-decoration: none;
    width: 100px;
}
input {
    width: 250px;
    height: 25px;
    color:#bababa;
    padding:5px;
    font-size: 12px;
    -moz-border-radius: 6px;  
}

so far for the design. now i guess, because of the 2 colums beside that i would like to achieve it needs to be floated each of this. so i have build this two classes:

.fl { float: left; margin-bottom:15px;}
.fd { clear: left; margin-bottom:15px;}

in class fl float means to set box1 to floating properties that box2 will be left hand side from it. fd class will be for the next line. so that box3 will break into another line. the margin is just for keeping some space between each field.

in my html i got this code:

<form>
<fieldset>
<legend>Headline for fieldset</legend>
<ul>

<li class="fl">
<label for="label1">label 1</label>
<input type="text" id="label1" name="label1" tabindex="10" autocomplete="off">
</li>

<li class="fl">
<label for="label2">label2</label>
<input type="text" id="label2" name="label2" tabindex="20" autocomplete="off">
</li>

<li class="fd">
<label for="label3">label3</label>
<input type="text" id="label3" name="label3" tabindex="30" autocomplete="off">
</li>

<li class="fl">
<label for="label4">label4</label>
<input type="text" id="label4" name="label4" tabindex="40" autocomplete="off">
</li>

</ul>
</fieldset>
</form>

so i have the following questions:

1. how can i reach that the labels will be placed above the input fields?

2. how can i reach the main goal to position them beside?

3. how can i adjust the space between the input fields in one line?

if there is someone who hould help me out i really would appreciate. thanks a lot.

回答1:

I think this is what you want:

fieldset { 
    height: 330px; 
    width: 580px;
}

label { 
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #ECECEC;
    text-decoration: none;
    width: 100px;
    display: block;
}
input {
    width: 250px;
    height: 25px;
    color:#bababa;
    padding:5px;
    font-size: 12px;
    -moz-border-radius: 6px;
    margin-right: 15px;
}

.fl, .fd { 
    float: left; 
    margin-bottom:15px;
 }

Edit: working example: http://jsfiddle.net/7hMCN/

回答2:

There are some semantic issues using form controls inside a list. But the easiest way is to get to your solution would be to wrap each <label><input> combo in a <div> then position the <div>. Using as table is a very old way to do this.

CSS

form div.left {
 width: 20%;
 float: left;
 display: inline;
 }
form div.right {
 width: 20%;
 float: right;
 display: inline;
 }

HTML

<form>
<div class="left"><label for="one">Label one</label><br>
<input id="one"></div>
<div class="right"><label for="two">Label two</label><br>
<input id="two"></div>

you could probably get fancy if you don't want to use the <br> like wrapping either the <label> or <input> in a span and position it. Can you expand on question 3?