css nie działa szerokość etykiety

112

Mam ogólny formularz, do którego chciałbym nadać styl, aby wyrównać etykiety i pola wejściowe. Z jakiegoś powodu, gdy podaję szerokość selektorowi etykiet, nic się nie dzieje:

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

Wynik:

wprowadź opis obrazu tutaj

jsFiddle

Co ja robię źle?

html css label Jeden
źródło

Nawiasem mówiąc, czy zawijanie sekcji formularza w <p>znaczniki to naprawdę dobry pomysł?

JGallardo

215

Zrób display: inline-block:

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

http://jsfiddle.net/aqMN4/

Davis
źródło

1

Trzymaj się bloku Inline. Przetestowałem to w IE7, IE8, IE9, FF

Davis

1

Czy istnieje obejście problemu umieszczania każdego elementu w <p>?

Colin D

1

@ColinD Polecam używanie div, a nie tagów <p>.

Davis,

37

Posługiwać się display: inline-block;

Wyjaśnienie:

labelJest elementem inline, co oznacza, że jest tak duża, jak to musi być.

Ustaw displaywłaściwość na inline-blocklub block, aby widthwłaściwość zaczęła obowiązywać.

Przykład:

#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>

Rozwiń fragment

użytkownik
źródło

1

Dzięki! Inline-block jest tym, czego potrzebowałem. Block sprawia, że wygląda dziwnie.

TheOne

2

Należy pamiętać, że obsługa inline-block jest pobieżna w IE poniżej IE8 - prawdopodobnie nie jest to zbyt duży problem w dzisiejszych czasach, ale należy o tym pamiętać. (źródło quirksmode.org/css/display.html )

n00dle

1

@PandaWood Przepraszamy, minęły prawie 2 lata odkąd skomentowałeś ten post. Ale odpowiadam na Twój komentarz, aby inni czytelnicy nie dali się zwieść wyjaśnieniom autora tego postu. Ten ostatni uznał, że labelelement nie szanuje widthwłaściwości, ponieważ jest elementem wbudowanym. Chciałbym podkreślić, że inputelement jest również domyślnie elementem wbudowanym. Ale pozwala zmienić jego szerokość za pomocą właściwości width w przeciwieństwie do labelelementu. Stąd rozumowanie autora nie jest poprawne.

ghd

6

Uważam, że etykiety są wbudowane, więc nie mają szerokości. Może spróbuj użyć "display: block" i stamtąd.

Mikrofon
źródło

6

Najpierw uczyń go blokiem, a następnie płyń w lewo, aby przestać wypychać następny blok do nowej linii.

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

ctrl-alt-dileep
źródło

5

nadaj styl

display:inline-block;

mam nadzieję, że to pomoże

Philemon philip Kunjumon
źródło

4

labelDomyślnym displaytrybem jest inline, co oznacza, że automatycznie dopasowuje się do zawartości. Aby ustawić szerokość, musisz ustawić, display:blocka następnie zrobić trochę faffingu, aby ustawić go prawidłowo (prawdopodobnie z udziałem float)

n00dle
źródło

css nie działa szerokość etykiety

Odpowiedzi: