У меня есть общая форма, которую я хотел бы стилизовать, чтобы выровнять метки и поля ввода. По какой-то причине, когда я задаю ширину селектору меток, ничего не происходит:
HTML:
<form id="report-upload-form" method="POST" action="" enctype="multipart/form-data">
<p>
<label for="id_title">Title:</label>
<input id="id_title" type="text" class="input-text" name="title"></p>
<p>
<label for="id_description">Description:</label>
<textarea id="id_description" rows="10" cols="40" name="description"></textarea></p>
<p>
<label for="id_report">Upload Report:</label>
<input id="id_report" type="file" class="input-file" name="report">
</p>
</form>
CSS:
#report-upload-form {
background-color: #316091;
color: #ddeff1;
font-weight:bold;
margin: 23px auto 0 auto;
border-radius:10px;
width: 650px;
box-shadow: 0 0 2px 2px #d9d9d9;
}
#report-upload-form label {
padding-left:26px;
width:125px;
text-transform: uppercase;
}
#report-upload-form input[type=text],
#report-upload-form input[type=file],
#report-upload-form textarea {
width: 305px;
}
Вывод:
Что я делаю не так?
<p>
действительно ли упаковка разделов формы в теги - хорошая идея?Ответы:
Сделайте
display: inline-block
:http://jsfiddle.net/aqMN4/
источник
Использовать
display: inline-block;
Объяснение:
В
label
встроенный элемент, то есть он имеет ровно столько, сколько нужно.Задайте для
display
свойства значениеinline-block
или,block
чтобыwidth
свойство вступило в силу.Пример:
источник
label
элемент не соблюдаетwidth
свойство, потому что это встроенный элемент. Хочу отметить, чтоinput
по умолчанию этот элемент также является встроенным. Но он позволяет изменять его ширину с помощью свойства width, в отличие отlabel
элемента. Следовательно, рассуждения автора неверны.Я считаю, что метки встроенные, поэтому они не принимают ширину. Возможно, попробуйте использовать "display: block" и продолжить работу оттуда.
источник
Сначала сделайте это блоком, затем переместите влево, чтобы не вставлять следующий блок в новую строку.
источник
дать стиль
надеюсь, это поможет »
источник
label
display
режим по умолчанию -inline
это означает, что он автоматически подстраивается под свое содержимое. Чтобы установить ширину, вам нужно установить,display:block
а затем выполнить некоторые действия, чтобы правильно расположить ее (возможно, с участиемfloat
)источник