标签左对齐 - 选择元素右对齐（CSS）

Question

我有一个表单布局，希望标签左对齐，表单控件右对齐。我尝试在表单控件上（此例中为）使用float:right，并应用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>

- Barbs

---

如果您希望选择框位于带有边框的框之外，则必须将选择标签放置在“category-select” div之外。 - Michaeldcooney

Answer 1

如果 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>

这里是演示。

- robertc

---

谢谢，这是一个非常优雅的解决方案，它还帮我解决了在IE7中遇到的另一个问题。干杯！ - Barbs

Answer 2

由于您将选择元素浮动，它不再影响包含 div 的高度。尝试向包含元素添加一些填充：http://jsfiddle.net/LZVhN/1/（还添加了一些相对定位到选择）

- ptriek

---

当然，你是对的。我认为添加填充会将选择框向周围移动。感谢你的帮助。 - Barbs