CSS 对齐标签和输入

发布于 2024-10-11 10:41:31 字数 509 浏览 2 评论 0原文

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。如果需要的话。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

幼儿园老大 2024-10-18 10:41:31

这是一件非常难以做好的事情。

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

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

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

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

中。

所以你的 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();

仅此而已...您的所有标签都将采用最长标签的宽度

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 */
}

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

回复收藏 0 原文

七堇年 2024-10-18 10:41:31

#o-bs-sum-buginfo 标签，#o-bs-sum-buginfo 输入{display:inline-block;width:50%;}

回复收藏 0 原文

百合的盛世恋 2024-10-18 10:41:31

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

Put the every label with its corresponding input into a p tag. Then add the following 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>

回复收藏 0 原文

上课铃就是安魂曲 2024-10-18 10:41:31

我认为使用 javascript 来实现简单的 css 技巧有点过分了。
这是我刚刚做的：
http://jsfiddle.net/t6R93/

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

PS：其他浏览器可能存在缺陷。我只用 Chrome 进行了测试。

I think using javascript for a simple css trick is overkill.
Here is the one i made just now:
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.

回复收藏 0 原文

檐上三寸雪 2024-10-18 10:41:31

无需使用 JavaScript、jQuery 或其他 div。您只需：

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

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

Float both input and label to left (note that input has to be block to be floated).
Add clear: both to label.
Set fixed width (e.g. 100px) to 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>

回复收藏 0 原文

苍暮颜 2024-10-18 10:41:31

我很好奇是否可以使用“自然”语义标记来完成此操作，即没有非语义包装元素并且使用包含其相应的输入的 label 而不是必须使用稍微笨拙的 for 属性来引用它：

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

固定宽度的标签不会对齐此处的输入，因为文本不是单独的元素，并且 Shahid 优雅的最小解决方案不起作用要么，但如果你愿意让所有输入具有相同的宽度（恕我直言，无论如何看起来都不错），你可以浮动它们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; }

-moz-box当 FF29 发布时，-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>

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 label containing its corresponding input rather than having to refer to it with the slightly clunky for attribute:

<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 float them 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-sizing should be redundant when FF29 is released, and even the box-sizing isn't needed unless you're mixing form control types. The clear and overflow are specifically needed for 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>

回复收藏 0 原文

~没有更多了~