ширина метки 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

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

html css label

— Тот самый
источник

Кстати, <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
}

— ctrl-alt-dileep
источник

5

дать стиль

display:inline-block;

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

— Филимон Филипп Кунджумон
источник

4

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

— n00dle
источник