表单中的css浮动2个输入域
我在理解css时遇到以下问题。
我有一张登记表。在该表单中，我使用了一个字段集。现在我想在每一行的旁边放置两个输入域。上面的每个字段也应该有一个标签。
所以我想要实现的是：
label 1 label 2
_______________ _______________
(_______________) (_______________)
label 3 label 4
_______________ _______________
(_______________) (_______________)我是css的新手，在理解float & clear方面有一些问题。
到目前为止，我有以下结构：
_______________
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;
}到目前为止，就设计而言。现在我猜，因为旁边的2列，我想实现它需要浮动的每一个这。所以我构建了这两个类：
.fl { float: left; margin-bottom:15px;}
.fd { clear: left; margin-bottom:15px;}在类fl中，float意味着将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>因此，我有以下问题：
- 如何才能使标签放置在输入字段的上方？
- 如何才能达到将它们定位在旁边的主要目标？
- 如何调整一行中输入字段之间的间距？
如果有人愿意帮助我，我会非常感激。非常感谢。
回答 3
Stack Overflow用户
发布于 2012-06-21 21:11:19
我想这就是你想要的：
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/
Stack Overflow用户
发布于 2012-06-21 21:09:27
在列表中使用表单控件存在一些语义问题。但最简单的方法是将每个<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>，比如将<label>或<input>包装在跨区中并对其进行定位，那么您可能会觉得有点花哨。你能在问题3上展开吗？
Stack Overflow用户
发布于 2012-06-21 21:24:12
问题1和2?)我添加了新的<br />元素(您可以让标签向左浮动或更改display:block;)。
问题3)我使用了:nth-of-type(odd)并添加了一个边距-右侧
Fiddle example here
https://stackoverflow.com/questions/11138787
复制相似问题
腾讯云开发者
