CSS 对齐标签和输入框

Question

CSS 对齐标签和输入框

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。

- hashg

6个回答

10

#o-bs-sum-buginfo标签, #o-bs-sum-buginfo输入{显示：内联块；宽度：50%;}

- Shahid

+1 好答案，只需要这段代码 -> display:inline-block;width:50%; 就足够了！ - devasia2112

1

无需使用JavaScript、jQuery或额外的

元素。您只需要：

将和都向左浮动（请注意，必须是块级元素才能浮动）。
为添加clear:both。
设置固定宽度（例如100px）的。

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>

- Michał Perłakowski

1

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

- amosrivera

5

此处的 p 没有语义意义。它不是一系列段落。使用 div 会更好。请参考被接受的答案。 - Merlyn Morgan-Graham

1

我认为在简单的CSS技巧中使用JavaScript是过度设计。这是我刚刚制作的一个： http://jsfiddle.net/t6R93/

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

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

- egiray

0

我很好奇是否可以使用“自然”的语义标记完成这个任务，即不使用非语义包装元素，并且将包含其对应的而不是使用稍微有些笨拙的属性来引用它：

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

固定宽度的标签无法对齐输入框，因为文本不是一个单独的元素，而 Shahid 的优雅简约的解决方案也不起作用，但如果您愿意使所有输入框的宽度相同（我认为这样看起来很好），您可以将它们向右浮动：

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-sizing在FF29发布后应该是多余的，甚至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>

- mrec

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Spudley · Accepted Answer

这是一件令人惊讶地棘手的事情。

许多人建议使用float:left;。个人而言，我非常不喜欢浮动；它们似乎会带来更多问题。

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

所以答案很简单，只需使它们都为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();

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