Fatal编程技术网
  • jquery/
  • Jquery CSS将标签和输入对齐

Jquery CSS将标签和输入对齐

jquery html css input

Jquery CSS将标签和输入对齐,jquery,html,css,input,labels,Jquery,Html,Css,Input,Labels,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-ErrorNumbe

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

#o-bs-sum-buginfo标签，#o-bs-sum-buginfo输入{显示：内联块；宽度：50%；}
这是一个非常棘手的问题

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

我的首选是使用内联块。这是一种显示方法，它将内联特性（以便可以轻松地将相邻图元对齐等）与块特性（例如，可以指定尺寸标注）相结合

所以答案很简单，就是让它们都
显示：inline块
并给提示一个固定的宽度，这将使它们旁边的输入字段对齐

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

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



.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();



就这些。。。所有标签都将采用最长标签的宽度
将每个标签及其相应的输入放入一个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>



标签{
浮动：左；
宽度：100px；//适合您需要的任何宽度
}
p{
边距：10px 0；//为每个输入操作垂直空格。。
}

错误前缀



我认为使用javascript实现简单的css技巧是过分的。
这是我刚才做的一个：



PS：它可能有其他浏览器的缺陷。我只使用Chrome进行了测试。
我很好奇，是否可以使用“自然”语义标记，即不使用非语义包装元素，并且使用包含相应的
输入的
标签
，而不必使用稍微笨重的
属性来引用它：


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


发布FF29时，
-moz框大小调整
应该是多余的，即使是
框大小调整
也不需要，除非您混合了表单控件类型。
清除
和
溢出
是
文本区域
特别需要的

完整混合输入类型示例：


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




对齐标签
标签{显示：块；边距：8px；宽度：360px；清除：右；溢出：自动；}
输入，按钮，文本区域，选择{框大小：边框框；-moz框大小：边框框；宽度：200px；浮动：右；}
名称
我要寻找圣杯
最喜欢的颜色蓝黄色
如果你确定…给出答案

不需要使用JavaScript、jQuery或其他
div
s。你只需要：


    

  • 向左浮动
    输入
    和
    标签
    （注意
    输入
    必须是块才能浮动）
    • 

  • 将
    清除：两个
    添加到
    标签
    • 

  • 将固定宽度（例如
    100px
    ）设置为
    标签
    • 




输入{
显示：块；
浮动：左；
}
标签{
浮动：左；
明确：两者皆有；
宽度：100px；
}



错误前缀
错误号

工作正常。如果没有围绕标签和输入的div容器，我可能会遇到问题。+1回答得好，只有这个代码片段->显示：内联块；宽度：50%；够了
p
在这里是非语义的。这不是一系列段落
div
将是更好的选择。见公认的答案。

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; }



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