css浮动2个inputfields在一个窗体中 [英] css floating 2 inputfields in a form

问题描述

我有一个理解css的问题。

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.

所以我想实现的是：

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

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

清除。

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

up to this point i have the following structure:

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

这里是我的想法：

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

i have the fieldset set to specific height and width:

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

之后，我用来设置我的标签和输入设计的信息： p>

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

。现在我猜，因为2个colums旁边，我想实现它需要浮动每个这一点。所以我有建立这两个类：

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

$ b $ p

float意味着将box1设置为box2的浮动属性从左手边。
fd类将用于下一行。所以box3会分成另一行。边距只是为了保持每个字段之间的一些空间。

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.

在我的html我有这个代码：

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>

所以我有以下问题：

1。
我怎么能知道标签将放置在输入字段的上面？

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

2。
我如何达到主要目标，将他们放在旁边？

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

3。
如何在一行中调整输入字段之间的空格？

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.

推荐答案

我认为这是你想要的：

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/

这篇关于css浮动2个inputfields在一个窗体中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！