41

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

4

6 回答 6

86

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

很多人会建议使用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();

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

于 2011-01-09T19:54:40.660 回答
10

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

于 2011-01-09T19:53:28.627 回答
1

将每个标签及其相应的输入放入 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>
于 2011-01-09T19:56:33.343 回答
1

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

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

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

于 2013-11-15T18:32:55.020 回答
1

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

  • 浮动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>

于 2016-01-07T21:14:29.560 回答
0

我很想知道这是否可以使用“自然”语义标记来完成，即没有非语义包装元素并且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的。clearoverflowtextarea

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

<!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>
于 2014-04-03T17:44:41.453 回答