CSS来alignment标签和input
HTML代码片段：
<fieldset id="o-bs-sum-buginfo"> <label for="o-bs-sum-bug-ErrorPrefix">Error Prefix</label> <input type="text" id="o-bs-sum-bug-ErrorPrefix" name="ErrorPrefix" value="" /> <label for="o-bs-sum-bug-ErrorNumber">Error Number</label> <input type="text" id="o-bs-sum-bug-ErrorNumber" name="ErrorNumber" value="" /> .... </fieldset> 只使用CSS（或jQuery），不pipe浏览器的大小，我想把标签和input元素相互配对。 我也有自由改变HTML的调整。 如果需要。
这是一件令人惊讶的棘手的事情之一。
很多人会build议使用float:left; 为了这。 就我个人而言，我真的不喜欢花车; 他们似乎会造成比他们解决更多的问题。
我的首选是使用内联块。 这是一种显示方法，它将内联属性（因此您可以轻松地将元素alignment，等等）与块属性（如能够指定尺寸）结合起来。
所以答案只是使它们都display:inline-block; 并给出提示一个固定的宽度，这将使input字段旁边的排队。
您还需要某种换行符或在input字段后断开，否则下一个提示符将出现在同一行上，这不是所需的效果。 实现这一目标的最好方法是将每个提示及其字段放入一个容器<div> 。
所以你的HTML将如下所示：
<fieldset id="o-bs-sum-buginfo" class="myfields"> <div> <label for="o-bs-sum-bug-ErrorPrefix">Error Prefix</label> <input type="text" id="o-bs-sum-bug-ErrorPrefix" name="ErrorPrefix" value="" /> </div> <div> <label for="o-bs-sum-bug-ErrorNumber">Error Number</label> <input type="text" id="o-bs-sum-bug-ErrorNumber" name="ErrorNumber" value="" /> </div> .... </fieldset>
你的CSS将如下所示：
.myfields label, .myfields input { display:inline-block; } .myfields label { width:200px; /* or whatever size you want them */ }
希望有所帮助。
编辑 ：你可以使用这个插件来设置每个标签的宽度：
jQuery.fn.autoWidth = function(options) { var settings = { limitWidth : false } if(options) { jQuery.extend(settings, options); }; var maxWidth = 0; this.each(function(){ if ($(this).width() > maxWidth){ if(settings.limitWidth && maxWidth >= settings.limitWidth) { maxWidth = settings.limitWidth; } else { maxWidth = $(this).width(); } } }); this.width(maxWidth); }
从这个页面的评论
你可以这样使用它：
$("div.myfields div label").autoWidth();
这就是所有…你所有的标签将采取最长的标签的宽度
#o-bs-sum-buginfo label, #o-bs-sum-buginfo input{display:inline-block;width:50%;}
把每个标签和相应的input放到ap标签中。 然后添加下面的CSS：
label{ float:left; width:100px; //whatever width that suits your needs } p{ margin:10px 0; //manipulate the vertical spaces for each input.. } <fieldset id="o-bs-sum-buginfo"> <p> <label for="o-bs-sum-bug-ErrorPrefix">Error Prefix</label> <input type="text" id="o-bs-sum-bug-ErrorPrefix" name="ErrorPrefix" value="" /> </p> </fieldset>
我认为使用JavaScript的一个简单的CSS技巧是矫枉过正。 这是我刚刚做的一个： http : //jsfiddle.net/t6R93/
div{ display: table-row; } label,input{ display:table-cell; }
PS：它可能与其他浏览器有瑕疵。 我只用Chrome进行testing。
没有必要使用JavaScript，jQuery或其他div 。 你只需要：
- 将
input和label浮动到左边（注意，input必须是块才能被浮动）。 - 添加
clear: bothlabel。 - 设置固定的宽度（例如
100px）来label。
input { display: block; float: left; } label { float: left; clear: both; width: 100px; }
<fieldset id="o-bs-sum-buginfo"> <label for="o-bs-sum-bug-ErrorPrefix">Error Prefix</label> <input type="text" id="o-bs-sum-bug-ErrorPrefix" name="ErrorPrefix" value="" /> <label for="o-bs-sum-bug-ErrorNumber">Error Number</label> <input type="text" id="o-bs-sum-bug-ErrorNumber" name="ErrorNumber" value="" /> </fieldset>
我很好奇，看看是否可以用“自然的”语义标记来完成，也就是说，没有非语义的包装元素， label包含相应的input而不必使用稍微笨重for属性for引用：
<fieldset> <label>Error Prefix<input/></label> <label>Error Number<input/></label> </fieldset>
一个固定宽度的标签将不会在这里alignmentinput，因为文本不是一个单独的元素，Shahid的优雅的最小的解决scheme也不工作，但是如果你愿意使所有的input相同的宽度（这恕我直言，看起来不pipe怎样）你可以把它们float在right ：
label { display:block; margin:8px; width:360px; clear:right; overflow:auto; } input, button, textarea, select { box-sizing:border-box; -moz-box-sizing:border-box; width:200px; float:right; }
当FF29被释放时， -moz-box-sizing应该是多余的，甚至不需要box-sizing ，除非你混合了form控制types。 textarea特别需要clear和overflow 。
完全混合input型的例子：
<!DOCTYPE html> <html> <head> <title>Aligned labels</title> <style> label { display:block; margin:8px; width:360px; clear:right; overflow:auto; } input, button, textarea, select { box-sizing:border-box; -moz-box-sizing:border-box; width:200px; float:right; } </style> </head> <body> <label>Name<input type="text" value="Sir Galahad of Camelot"/></label> <label>Quest<textarea>I seek the Holy Grail</textarea></label> <label>Favourite Colour<select><option>Blue</option><option>Yellow</option></select></label> <label>If you're sure...<button>Give Answers</button></label> </body> </html>
