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)，不管浏览器的大小，我想要将标签和输入元素彼此相邻。我也有自由改变调整HTML。如果需要。
解决方法
这是其中一个可能令人惊讶的棘手的权利。
很多人会建议使用float：left;为了这。个人而言，我真的不喜欢浮动;他们似乎引起更多的问题，而不是他们解决。
我的首选是使用内联块。这是一种显示方法，它将嵌入式属性(例如能够指定维度)组合成内联属性(以便您可以轻松地对齐彼此相邻的元素等)。
所以答案是简单地使它们都显示：inline-block;并给提示一个固定的宽度，这将使他们旁边的输入字段排队。
您还需要在输入字段后面添加换行符或换行符，否则下一个提示将出现在同一行上，这不是所需的效果。实现这一点的最佳方法是将每个提示及其字段放入容器< 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();
