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的。 这是结合了内联属性(这样你就可以很容易地调整彼此相邻,等元素),块属性(如能够指定尺寸)的显示方法。

因此,答案很简单,就是让他们俩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();

和多数民众都...您的所有标签都将采取最长的标签宽度

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

把每一个标签与其对应的输入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>

我想用JavaScript进行一个简单的CSS技巧是矫枉过正。 这是我刚才所作的一项:http://jsfiddle.net/t6R93/

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

PS:这可能与其他浏览器的缺陷。 我只跟Chrome的测试。

我很好奇,看看这可能是与“自然”的语义标记,如:没有非语义包装元素,并用做label包含其相应input ,而不是指它与略微笨重for属性:

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

因为文字不是一个独立的元素一个固定宽度的标签将不会在这里对准输入和沙希德的优雅最小解也不管用,但如果你愿意做所有的输入相同的宽度(恕我直言,这看起来反正好看),您可以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; }

-moz-box-sizing时,FF29被释放,甚至应该是多余的box-sizing不需要,除非你是混合表单控件类型。 在clearoverflow是专门针对需要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>

分类:jQuery的 时间:2015-03-15 人气:0
分享到:

相关文章

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 0.625 (s). 10 q(s)