jquery – CSS对齐标签和输入

发布时间:2019-03-14 整理:脚本之家 作者:未知
脚本之家收集整理的这篇文章主要介绍了jquery – CSS对齐标签和输入脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随脚本之家小编过来看看吧!
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。如果需要。

这是其中一个可能令人惊讶的棘手的权利。

很多人会建议使用float:left;为了这。个人而言,我真的不喜欢浮动;他们似乎引起更多的问题,而不是他们解决。

我的首选是使用内联块。这是一种显示方法,它将嵌入式属性(例如能够指定维度)组合成内联属性(以便您可以轻松地对齐彼此相邻的元素等)。

所以答案是简单地使它们都显示: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); 
}

from this page in a comment

你可以这样使用它:

$("div.myfields div label").autowidth();

并且所有…所有的标签将采取最长的标签的宽度

总结

以上是脚本之家为你收集整理的jquery – CSS对齐标签和输入全部内容,希望文章能够帮你解决jquery – CSS对齐标签和输入所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

标签:input