css浮动2个输入字段的形式

我有一个注册表。在这种形式下，我使用了一个fieldset。现在我想为每一行定位两个输入字段。上面的每个领域也应该有一个标签。

所以我想实现的是：

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

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

我真的新的CSS，并有一些问题的理解浮&清楚。

到这一点，我有以下结构：

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

迄今为止的设计。现在我想，因为旁边的2个colums，我想实现它需要漂浮每一个这个。所以我有建立这个两个类：

类

.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. 如何在一行中调整输入字段之间的空间？

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

来源

2012-06-21 bonny

创建一个表，人气指数呢？ – hjpotter92

宁愿使用CSS。我想发展自己。谢谢 – bonny

我想这是你想要的东西：

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/

来源

2012-06-21 13:11:18 madeye

definetly不..你只是把fl。和fd。组成一个班级。标签呢？谢谢。 – bonny

这段代码正在做你正在问的东西。标签位于输入字段的上方。实现将两个输入字段放在一起的主要目标。如果你想分开它，只需在你的输入栏中输入保证金。 – madeye

似乎是我在使用Dreamweaver时遇到问题。当我在liveview中时，我看不到任何变化。 codeview使它应该如何做。正确的订单只有一些问题，第一个项目不会改变。对不起。谢谢回答 – bonny

使用列表中的表单控件存在一些语义问题。但最简单的方法是将您的解决方案包装成<div>中的每个<label><input>组合，然后放置<div>。使用表格是一种非常古老的方法。

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>像一个跨度，并将其放置包裹要么<label>或<input>。你可以扩展问题3吗？

来源

2012-06-21 13:09:27

第1期），我添加<br />新线元素（你可能有标签[2？]向左浮动或更改display:block;）。

第3期）我用:nth-of-type(odd)，并增加了利润率右

Fiddle example here

来源

2012-06-21 13:24:12 Fewfre

css浮动2个输入字段的形式

回答

相关问题