左对齐标签 - 右对齐选择元素 (CSS)
Posted
技术标签:
【中文标题】左对齐标签 - 右对齐选择元素 (CSS)【英文标题】:Left Align Label - Right Align Select Element (CSS) 【发布时间】:2012-01-15 11:04:47 【问题描述】:我有一个表单布局,我想显示左对齐的标签和右对齐的表单控件。我一直在尝试在表单控件(在本例中为 a )上使用 float:right 使其工作,然后对其应用 clearfix 类,但 clearfix 似乎无法在我的选择框上工作。
这里有什么问题吗?或者 clearfix 不能在选择元素上工作?
但是,当我这样做时,选择框仍然延伸到包含 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>
【问题讨论】:
如果你想让选择框在有边框的框之外,那么你必须将选择标签放在“category-select”div之外。 【参考方案1】:由于您浮动选择元素,它不会再影响包含 div 的高度。尝试为包含元素添加一些填充:http://jsfiddle.net/LZVhN/1/(还为选择添加了一些相对定位)
【讨论】:
当然你是对的。我在想添加填充也会简单地移动选择框。感谢您的帮助。【参考方案2】:如果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.
【讨论】:
感谢这是一个非常优雅的解决方案,它有助于解决我在 IE7 中遇到的另一个问题。干杯!以上是关于左对齐标签 - 右对齐选择元素 (CSS)的主要内容,如果未能解决你的问题,请参考以下文章