html - css在表单中 float 2个输入字段

Question

我在理解 css 时遇到以下问题。

我有一张注册表。在这种形式中，我使用字段集。现在我想在每行旁边放置两个输入字段。上面的每个字段还应该有一个标签。

所以我想要实现的是:

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

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

我是 css 新手，在理解 float 和clear 时遇到一些问题。

到目前为止，我有以下结构:

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

这是我的想法:

我将字段集设置为特定的高度和宽度:

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

之后我用来设置标签和输入设计的信息:

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;  
}

到目前为止的设计。现在我想，因为除了我想实现的两列之外，每一个列都需要 float 。所以我构建了这两个类:

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

在 fl float 类中意味着将 box1 设置为 float 属性，box2 将位于其左侧。 fd 类将用于下一行。这样 box3 将中断到另一行。边距只是为了在每个字段之间保留一些空间。

在我的 html 中我得到了这个代码:

<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>

所以我有以下问题:

1. 我怎样才能将标签放置在输入字段上方？

2. 我怎样才能达到将它们放在旁边的主要目标？

3. 如何调整一行中输入字段之间的间距？

如果有人可以帮助我，我真的很感激。非常感谢。

Answer 1

我想这就是你想要的:

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;
 }

编辑:工作示例:http://jsfiddle.net/7hMCN/