左對齊標籤 - 右對齊選擇元素（CSS）

我有一個表單佈局，我想顯示左對齊的標籤和右對齊的表單控件。我一直試圖讓它在表單控件上使用float：right（在這種情況下爲a），然後將clearfix類應用於它，但clearfix似乎不在我的選擇框中工作。左對齊標籤 - 右對齊選擇元素（CSS）

這裏有什麼問題或是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>

來源

2011-12-07 Barbs

如果您希望選擇框位於具有邊框的框外，那麼您必須將選擇標籤放置在「類別選擇」div之外。 – Michaeldcooney

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

Here's the demo。

來源

2011-12-08 00:37:13 robertc

感謝這是一個非常優雅的解決方案，它與我在IE7中遇到的另一個問題有所幫助。乾杯! – Barbs

既然你是浮動的選擇元素，也不會影響內含div的高度了。嘗試添加一些填充到包含元素：http://jsfiddle.net/LZVhN/1/（也添加了一些相對定位到選擇）

來源

2011-12-07 22:54:43 ptriek

當然你是對的。我想添加填充將簡單地將選擇框也移動。謝謝您的幫助。 – Barbs

左對齊標籤 - 右對齊選擇元素（CSS）

回答

相關問題