左对齐标签 - 右对齐选择元素 (CSS)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8423741/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Left Align Label - Right Align Select Element (CSS)
提问by Barbs
I have a form layout that I want to display the label aligned left and the form control aligned right. I have been trying to get it to work using a float:right on the form control (in this case a ) and then applying the clearfix class to it but the clearfix does not appear to be working on my select box.
我有一个表单布局，我想显示左对齐的标签和右对齐的表单控件。我一直试图让它在表单控件上使用 float:right 来工作（在本例中为 a ），然后将 clearfix 类应用于它，但 clearfix 似乎没有在我的选择框上工作。
Is there something wrong here or is clearfix not expected to work on a select element?
这里有什么问题，或者 clearfix 不会在选择元素上工作？
When I do this however, the select box still extends outside the bottom of the containing div.
但是，当我这样做时，选择框仍然延伸到包含 div 的底部之外。
My Code:
我的代码：
<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>
采纳答案by robertc
If the selectelement is the tallest thing, why not float the label? You can also take the opportunity to make it actually a label instead of just some text in a div. Here's the CSS:
如果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;
}
Here's the HTML:
这是 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>
这是演示。
回答by ptriek
Since you're floating the select element, it won't affect the height of the containing div anymore. Try adding some padding to the containing element: http://jsfiddle.net/LZVhN/1/(also added some relative positioning to the select)
由于您浮动 select 元素，它不会再影响包含 div 的高度。尝试向包含元素添加一些填充：http: //jsfiddle.net/LZVhN/1/（还向选择添加了一些相对定位）
