ширина метки css не действует


112

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

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

Вывод:

введите описание изображения здесь

jsFiddle

Что я делаю не так?


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

Ответы:


215

Сделайте display: inline-block:

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

http://jsfiddle.net/aqMN4/


1
Придерживайтесь Inline-block. Тестировал в IE7, IE8, IE9, FF
Дэвис

1
Есть ли обходной путь для размещения каждого элемента в <p>?
Colin D

1
@ColinD Я бы рекомендовал использовать div, а не теги <p>.
Дэвис

37

Использовать display: inline-block;

Объяснение:

В label встроенный элемент, то есть он имеет ровно столько, сколько нужно.

Задайте для 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>


1
Спасибо! inline-block - это то, что мне нужно. Блок делает это странным.
TheOne

2
Имейте в виду, что поддержка inline-block в IE ниже IE8 отрывочна - вероятно, в наши дни это не такая уж большая проблема, но о чем следует помнить. (источник quirksmode.org/css/display.html )
n00dle

1
@PandaWood Извините, прошло почти 2 года с тех пор, как вы прокомментировали этот пост. Но я отвечаю на ваш комментарий, чтобы другие читатели не ошиблись объяснением, данным автором этого сообщения. Последний рассудил, что labelэлемент не соблюдает widthсвойство, потому что это встроенный элемент. Хочу отметить, что inputпо умолчанию этот элемент также является встроенным. Но он позволяет изменять его ширину с помощью свойства width, в отличие от labelэлемента. Следовательно, рассуждения автора неверны.
ghd

6

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


6

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

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


4

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.