CSS来对齐标签和输入 [英] CSS to align label and input

问题描述

HTML代码段：

 < fieldset id =o-bs-sum-buginfo> 
< label for =o-bs-sum-bug-ErrorPrefix>错误前缀< / label> 
< input type =textid =o-bs-sum-bug-ErrorPrefixname =ErrorPrefixvalue =/> 
 
< label for =o-bs-sum-bug-ErrorNumber>错误号< / label> 
< input type =textid =o-bs-sum-bug-ErrorNumbername =ErrorNumbervalue =/> 
 .... 
< / fieldset> 
 

仅使用CSS（或jquery），不管浏览器大小如何，我想将标签和输入元素相邻。我也有自由改变调整HTML。如果需要的话。

解决方案

这是其中一个非常棘手的问题。

许多人会建议使用 float：left; 。个人而言，我真的不喜欢浮动;它们似乎导致更多的问题，而不是他们解决。

我的首选是使用inline-block。这是一种显示方法，它将嵌入式属性（例如能够指定维度）与内联属性（以便您可以轻松地将彼此相邻的元素等）组合。

因此，答案是简单地让它们 display：inline-block; ，并给提示一个固定的宽度，这将使他们旁边的输入字段排队。 / p>

您还需要在输入字段后输入换行符或换行符，否则下一个提示将出现在同一行，这不是所需的效果。实现这个的最好方法是将每个提示及其字段放入一个容器< div> 。

因此，您的HTML将如下所示：

 < fieldset id =o-bs-sum-buginfoclass =myfields > 
< div> 
< label for =o-bs-sum-bug-ErrorPrefix>错误前缀< / label> 
< input type =textid =o-bs-sum-bug-ErrorPrefixname =ErrorPrefixvalue =/> 
< / div> 
 
< div> 
< label for =o-bs-sum-bug-ErrorNumber>错误号< / label> 
< input type =textid =o-bs-sum-bug-ErrorNumbername =ErrorNumbervalue =/> 
< / div> 
 .... 
< / fieldset> 
  

，您的CSS将如下所示：

  .myfields label，.myfields input {
 display：inline-block; 
} 
 
 .myfields label {
 width：200px; / *或任何你想要的大小* / 
} 
  

希望有帮助。 p>

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

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

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

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>

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.

解决方案

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.

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.

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

So your HTML will look like this:

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

.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

这篇关于CSS来对齐标签和输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！