Что ж, тема размещения ярлыка над входом или рядом с ним - отдельная дискуссия (я рекомендую прочитать книгу Люка Вроблевского по этому вопросу: http://www.lukew.com/resources/articles/web_forms.html)
Стилизация веб-форм довольно тривиальна. Прежде всего, вы хотите убедиться, что вы помечаете свои формы семантически соответствующим образом. Это одно из основных преимуществ, которые вы можете использовать сейчас, когда вы используете CSS для разметки вместо таблиц. Подробнее об этом см. Превосходную статью List Apart на эту тему: http://www.alistapart.com/articles/prettyaccessibleforms/
Теперь в вышеупомянутой статье автор использует свойство display, называемое inline-block. Это довольно простой способ достижения аффекта. Просто примените:
label {
display: inline-block;
width: 120px; /* Specify the width that works for your design */
}
И ваши ярлыки будут иметь фиксированную длину с входом рядом с ними. Однако, если вы не указали ширину и просто используете:
label, input {
display: inline-block;
}
Тогда ваши метки и входы будут выстроены в линию «автоматически», как вы выразились. Проблема здесь не техническая, а скорее проблема дизайна. Если вы вводите данные не для выравнивания по вертикали, пользователю будет сложнее заполнить форму. Это еще одно соображение, о котором вам следует помнить, так как проще расположить метку и ввести таким образом, чем при фиксированной ширине.
Другая проблема заключается в том, что inline-block не работает в определенных браузерах. Inline-block не является надежным в старых версиях Firefox или IE. Поэтому я склонен использовать альтернативный метод. Допустим, вы помечаете свои формы семантически соответствующим образом, используя список. Ну, в этом случае вы можете получить что-то вроде:
<form>
<fieldset>
<legend>Health information:</legend>
<ul>
<li><label>Height</label> <input type="text" size="3" /></li>
<li><label>Weight</label> <input type="text" size="3" /></li>
</ul>
</fieldset>
</form>
В этом случае мы можем использовать фиксированную ширину и абсолютное позиционирование, чтобы выровнять наши элементы рядом:
form li {
display: block;
padding: 2px;
position: relative;
}
/* The top and left position of 2px simulate
padding since we are using absolute positioning. */
form label {
display: block;
left: 2px;
position: absolute;
top: 2px;
width: 120px;
}
form input {
display: block;
margin-left: 125px;
}
Метка располагается относительно элемента списка, а ввод сдвигается в сторону с левым полем. Есть проблема с этим методом, хотя. Этот метод будет работать только с жестко заданной шириной. Что еще более важно, многострочная метка не будет очищена должным образом. Таким образом, в этой ситуации мы можем использовать аналогичный подход, но использовать float и overflow. Таким образом, мы могли бы использовать этот альтернативный CSS в той же HTML-разметке, которую я показал ранее:
form li {
display: block;
overflow: hidden; /* This clears the floating element. */
padding: 2px;
}
form label {
display: block;
float: left;
padding-right: 5px;
}
form input {
display: block;
}
Теперь с помощью этого метода метка перемещается слева от ввода. Если вы не укажете ширину, метка будет такой же ширины содержимого, которое в ней находится (вплоть до точки ширины ее родительского узла в документе HTML). При установке переполнения на скрытый в родительском объекте нет необходимости очищать элемент. Этот метод будет работать с жестко заданной шириной или унаследованным значением по умолчанию, которое равно width: auto.
И последнее, но не менее важное, если вы хотите использовать наиболее эффективный подход к форме (метки сверху входных данных), который доказал, что это стиль формы, который пользователи могут заполнять быстрее всего - единственный CSS, необходимый для выполнить это:
label, input {
display: block;
}
Еще одно замечание - при разметке HTML как таковой вы можете задаться вопросом о том, что все эти элементы списка создают маркеры и т. Д. Вам следует включить сброс CSS в документе, чтобы обеспечить согласованность между браузерами. Я рекомендую Эрика Мейера:
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/