CSS用于对齐标签和输入

Question

HTML Code代码段:

<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的调整.如果需要.

Answer 1

这是一个令人惊讶的难以做到的事情之一.

很多人会建议使用float:left;这个.就个人而言,我真的不喜欢花车; 他们似乎比他们解决的问题更多.

我的偏好是使用内联块.这是一种显示方法,它将内联属性(因此您可以轻松地将元素彼此对齐等)与块属性(例如能够指定维度)相结合.

所以答案就是简单地使它们两者display: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();

这就是全部...所有标签都将采用最长标签的宽度

Answer 2

#o-bs-sum-buginfo label, #o-bs-sum-buginfo input{display:inline-block;width:50%;}