jQuery CSS 对齐标签和输入

CSS to align label and input

提问by hashg

HTML Code Snippet:

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>

Using only CSS (or jquery), irrespective of the browser size, I want to pair label and input elements next to each other. I also do have freedom to change tweak the HTML. if required.

仅使用 CSS（或 jquery），无论浏览器大小如何，我都想将 label 和 input 元素彼此相邻配对。我也可以自由更改调整 HTML。如果需要的话。

回答by Spudley

This is one of those things which can be surprisingly tricky to get right.

这是其中一件很难做到的事情。

Many people will suggest using float:left;for this. Personally, I really dislike floats; they seem to cause more problems than they solve.

许多人会建议float:left;为此使用。就个人而言，我真的不喜欢花车；它们造成的问题似乎比解决的问题还多。

My preference is to use inline-block. This is a display method that combines inline properties (so you can easily align elements next to each other, etc) with block properties (such as being able to specify dimensions).

我的偏好是使用内联块。这是一种将内联属性（因此您可以轻松地将元素彼此相邻对齐等）与块属性（例如能够指定尺寸）相结合的显示方法。

So the answer is simply to make them both display:inline-block;and give the prompts a fixed width, which will make the input fields next to them line up.

所以答案很简单，让它们两者兼而有之，display:inline-block;并给提示一个固定的宽度，这将使它们旁边的输入字段对齐。

You'll also need some sort of line feed or break after the input field, otherwise the next prompt will appear on the same line, which isn't the desired effect. The best way to achieve this is to put each prompt and its field into a container <div>.

您还需要在输入字段后进行某种换行或换行，否则下一个提示将出现在同一行上，这不是您想要的效果。实现此目的的最佳方法是将每个提示及其字段放入一个容器中<div>。

So your HTML will look like this:

因此，您的 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>

and your CSS will look like this:

你的 CSS 将如下所示：

.myfields label, .myfields input {
  display:inline-block;
}

.myfields label {
  width:200px; /* or whatever size you want them */
}

Hope that helps.

希望有帮助。

Edit: you can use this plugin for setting the width of each label:

编辑：您可以使用此插件来设置每个标签的宽度：

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

来自此页面的评论

and you use it this way:

你这样使用它：

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

and thats all... all your labels are going to take the width of the longest label

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

回答by Shahid

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

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

回答by Micha? Per?akowski

There's no need to use JavaScript, jQuery, or additional divs. You just have to:

无需使用 JavaScript、jQuery 或其他divs。你只需要：

• Float both inputand labelto left (note that inputhas to be block to be floated).
• Add clear: bothto label.
• Set fixed width (e.g. 100px) to label.

• 向左input和label向左浮动（注意input必须被阻止才能浮动）。
• 添加clear: both到label.
• 将固定宽度（例如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>

回答by amosrivera

Put the every label with its corresponding input into a p tag. Then add the following css:

将每个标签及其对应的输入放入 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>

回答by egiray

I think using javascript for a simple css trick is overkill. Here is the one i made just now: http://jsfiddle.net/t6R93/

我认为将 javascript 用于简单的 css 技巧是矫枉过正的。这是我刚刚制作的：http: //jsfiddle.net/t6R93/

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

PS: It may have flaws with other browsers. I only tested with Chrome.

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

回答by mrec

I was curious to see if this could be done with the "natural" semantic markup, i.e. with no non-semantic wrapper elements and with the labelcontaining its corresponding inputrather than having to refer to it with the slightly clunky forattribute:

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

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

A fixed-width label won't align the inputs here because the text isn't a separate element, and Shahid's elegantly minimal solution doesn't work either, but if you're willing to make all inputs the same width (which IMHO looks nice anyway) you can floatthem right:

固定宽度的标签不会在此处对齐输入，因为文本不是一个单独的元素，而且 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; }

The -moz-box-sizingshould be redundant when FF29 is released, and even the box-sizingisn't needed unless you're mixing form control types. The clearand overfloware specifically needed for textarea.

本-moz-box-sizing应该是多余的FF29被释放时，甚至box-sizing不需要，除非你是混合形式的控制类型。在clear和overflow专门需要textarea。

Full mixed-input-type example:

完整的混合输入类型示例：

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