Вопрос по css, html – Ширина метки CSS не действует

100

У меня есть общая форма, которую я хотел бы оформить, чтобы выровнять метки и поля ввода. По какой-то причине, когда я задаю ширину селектора меток, ничего не происходит:

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;
}

Выход:

enter image description here

Что я делаю неправильно?

Кстати, оборачиваем разделы формы в<p> теги действительно хорошая идея? JGallardo

Ваш Ответ

6   ответов
194

Делатьdisplay: inline-block:

#report-upload-form label {
    padding-left:26px;
    width:125px;
    text-transform: uppercase;
    display:inline-block
}

http: //jsfiddle.net/aqMN4

Стик с встроенным блоком. Протестировано в IE7, IE8, IE9, FF Davis
Есть ли обходной путь для размещения каждого элемента в <p>? Colin D
@ ColinD Я бы рекомендовал использовать div, а не теги <p>. Davis
34

display: inline-block;

Explanation:

Thelabel - встроенный элемент, то есть он настолько большой, насколько это необходимо.

Установитьdisplay свойство либоinline-block илиblock для того, чтобыwidth свойство вступает в силу.

Пример

#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;
    display: inline-block;
}

#report-upload-form input[type=text], 
#report-upload-form input[type=file],
#report-upload-form textarea {
    width: 305px;
}
<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>

Благодарность! inline-block это то что мне нужно. Блок заставляет это выглядеть странно. TheOne
Помните, что поддержка встроенного блока в IE ниже, чем IE8, отрывочна - вероятно, не слишком большая проблема в наши дни, но кое-что нужно иметь в виду. (источник Quirksmode.org / CSS / display.html) n00dle
+ 1 для добавления объяснения с ответом - даже если ответ совпадает с принятым ответом PandaWood
@ PandaWood Извините, прошло почти 2 года с тех пор, как вы прокомментировали этот пост. Но я отвечаю на ваш комментарий, чтобы другие читатели не ошиблись объяснением, данным автором этого поста. Последний рассуждал, чтоlabel элемент не уважаетwidth свойство, потому что это встроенный элемент. Я хотел бы отметить, чinputлемент @ также является встроенным элементом по умолчанию. Но это позволяет изменять ширину, используя свойство width в отличие отlabel элемент. Следовательно, рассуждения автора неверны. ghd
6

а затем переместитесь влево, чтобы прекратить вставку следующего блока в новую строку.

#report-upload-form label {
                           padding-left:26px;
                           width:125px;
                           text-transform: uppercase;
                           display:block;
                           float:left
}
5

что ярлыки встроены, и поэтому они не занимают ширину. Может быть, попробуйте использовать "display: block" и идти оттуда.

4

придай стиль

display:inline-block;

надеюсь, это поможет '

3

label по умолчаниюdisplay режимinline, что означает, что он автоматически изменяет размеры своего контента. Чтобы установить ширину, вам нужно установитьdisplay:block и затем сделайте несколько ошибок, чтобы правильно расположить его (возможно, с использованиемfloat)

Похожие вопросы