我有一个表单布局,我希望显示左对齐的标签和右对齐的表单控件。我一直试图让它使用浮点数:在窗体控件(在这种情况下为a)上然后应用clearfix类,但clearfix似乎不在我的选择框上工作。
这里有什么问题或者clearfix不能用于select元素吗?
但是当我这样做时,选择框仍然延伸到包含div的底部之外。
我的代码:
<style type="text/css">
#category-select {
left: 0px;
top: 0px;
width: 350px;
border: 1px solid #666;
}
select#category {
float: right;
}
select.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
</style><!-- main stylesheet ends, CC with new stylesheet below... -->
<!--[if IE]>
<style type="text/css">
select.clearfix {
zoom: 1;
}
</style>
<![endif]-->
<div id="triage">
<div id="category-select">
Category:
<select class="ipad-dropdown clearfix" id="category" name="category">
<option value="A">A - Emergency
<option value="B">B - Urgent
<option value="C">C - ASAP
<option value="D" selected>D - Standard
</select>
</div>
</div>
答案 0 :(得分:6)
如果select
元素是最高的元素,为什么不浮动标签?您也可以借此机会将其实际设为标签,而不仅仅是div
中的某些文字。这是CSS:
#category-select {
left: 0px;
top: 0px;
width: 350px;
border: 1px solid #666;
text-align: right;
}
#category-select label {
float: left;
margin: 1px;
}
这是HTML:
<div id="triage">
<div id="category-select">
<label for="category">Category:</label>
<select class="ipad-dropdown clearfix" id="category" name="category">
<option value="A">A - Emergency</option>
<option value="B">B - Urgent</option>
<option value="C">C - ASAP</option>
<option value="D" selected>D - Standard</option>
</select>
</div>
</div>
答案 1 :(得分:0)
由于您正在浮动select元素,因此它不会再影响包含div的高度。尝试在包含元素中添加一些填充:http://jsfiddle.net/LZVhN/1/(还为选择添加了一些相对位置)