左对齐标签 - 右对齐选择元素(CSS)

Question

我有一个表单布局,我想显示左对齐的标签和右对齐的表单控件.我一直试图让它使用浮点数:在窗体控件(在这种情况下为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>

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>

这是演示.