Это одна из тех вещей, которые может быть удивительно сложно сделать правильно.
Многие люди предложат использовать для этого 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();
и все... все ваши метки будут иметь ширину самой длинной метки
person
Spudley
schedule
09.01.2011