Question

我对css有以下问题。

我有一份登记表。在那种形式我使用一个字段集。现在我想为每一行旁边放置两个输入字段。对于上面的每个领域也应该有一个标签。

所以我想要实现的是：

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

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

我是css的新手，并且在理解浮动和放大器时遇到一些问题。清楚。

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

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

以下是我的想法：

我将fieldset设置为特定的高度和宽度：

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

到目前为止的设计。现在我想，因为我希望实现它旁边的两个柱子，它需要每个都浮动。所以我建立了这两个类：

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

类fl浮点数中的

表示将box1设置为浮动属性，即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

在列表中使用表单控件存在一些语义问题。但最简单的方法是找到你的解决方案，将每个<label><input>组合包裹在<div>中，然后定位<div>。使用as表是一种非常古老的方法。

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>

如果您不想使用<br>之类的方式包裹{span}中的<label>或<input>并定位它，那么您可能会感到高兴。你能扩展问题3吗？

Answer 2

我认为这就是你想要的：

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/

Answer 3

问题1 [和2？]）我添加了<br />个新行元素（您可能会将标签向左浮动或更改display:block;）。

问题3）我使用了:nth-of-type(odd)并添加了一个右边的

Fiddle example here

css在表单中浮动2个输入字段

3 个答案: