Question

HTML Code Snippet：

<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); }

from this page in a comment

你用这种方式：

$("div.myfields div label").autoWidth();

并且全部......所有标签都将采用最长标签的宽度

Answer 2

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

Answer 3

将带有相应输入的每个标签放入p标签。然后添加以下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>

Answer 4

我认为使用javascript进行简单的css技巧是有点过分的。这是我刚刚制作的那个： http://jsfiddle.net/t6R93/

div{
  display: table-row;
}
label,input{
  display:table-cell;
}

PS：它可能与其他浏览器存在缺陷。我只用Chrome测试过。

Answer 5

不需要使用JavaScript，jQuery或其他div。你只需要：

将input和label向左浮动（请注意input必须阻止浮动）。
将clear: both添加到label。
将固定宽度（例如100px）设置为label。

＆＃13;

input {
  display: block;
  float: left;
}
label {
  float: left;
  clear: both;
  width: 100px;
}

＆＃13;

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

＆＃13;

Answer 6

我很想知道是否可以使用“自然”语义标记来完成，即没有非语义包装元素，并且label包含其对应的input而不是必须引用使用稍微笨重的for属性：

<fieldset>
  <label>Error Prefix<input/></label>
  <label>Error Number<input/></label>
</fieldset>

固定宽度标签不会在这里对齐输入，因为文本不是一个单独的元素，而Shahid优雅的最小解决方案也不起作用，但是如果你愿意让所有输入都相同的宽度（无论如何，恕我直言看起来不错）你可以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。 clear具体需要overflow和textarea。

完全混合输入型示例：

<!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>

CSS用于对齐标签和输入

6 个答案: