CSS-Etikettenbreite wird nicht wirksam

112

Ich habe ein generisches Formular, das ich formatieren möchte, um die Beschriftungen und Eingabefelder auszurichten. Aus irgendeinem Grund passiert nichts, wenn ich dem Etikettenwähler eine Breite gebe:

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

Ausgabe:

Geben Sie hier die Bildbeschreibung ein

jsFiddle

Was mache ich falsch?

html css label

— Der Eine
quelle

Ist es übrigens <p>wirklich eine gute Idee, die Formularabschnitte in Tags zu verpacken ?

— JGallardo

214

Tun Sie display: inline-block:

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

http://jsfiddle.net/aqMN4/

— Davis
quelle

1

Bleib beim Inline-Block. Getestet in IE7, IE8, IE9, FF

— Davis

1

Gibt es eine Problemumgehung, um jedes Element in einem <p> zu platzieren?

— Colin D

1

@ColinD Ich würde empfehlen, divs zu verwenden, keine <p> -Tags.

— Davis

36

Verwenden display: inline-block;

Erläuterung:

Das labelist ein Inline-Element, dh es ist nur so groß, wie es sein muss.

Setzen Sie die displayEigenschaft auf entweder inline-blockoder block, damit die widthEigenschaft wirksam wird.

Beispiel:

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

Erweitern Sie das Snippet

— Benutzer
quelle

1

Vielen Dank! Inline-Block ist das, was ich brauchte. Block lässt es komisch aussehen.

— TheOne

2

Beachten Sie, dass die Unterstützung von Inline-Block im IE unter IE8 lückenhaft ist - heutzutage wahrscheinlich kein allzu großes Problem, aber etwas, das Sie beachten sollten. (Quelle quirksmode.org/css/display.html )

— n00dle

1

@PandaWood Sorry, es ist fast 2 Jahre her, seit du diesen Beitrag kommentiert hast. Ich antworte jedoch auf Ihren Kommentar, damit andere Leser nicht durch die Erklärung des Autors dieses Beitrags irregeführt werden. Letzteres hat begründet, dass das labelElement die widthEigenschaft nicht respektiert, da es sich um ein Inline-Element handelt. Ich möchte darauf hinweisen, dass das inputElement standardmäßig auch ein Inline-Element ist. Im Gegensatz zum labelElement kann die Breite jedoch mithilfe der Eigenschaft width geändert werden . Daher ist die Argumentation des Autors nicht korrekt.

— Ghd

6

Ich glaube, dass Etiketten inline sind und daher keine Breite haben. Versuchen Sie es vielleicht mit "display: block" und gehen Sie von dort aus.

— Mike
quelle

6

Machen Sie es zuerst zu einem Block und schweben Sie dann nach links, um den nächsten Block nicht mehr in eine neue Zeile zu schieben.

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

— Strg-Alt-Dileep
quelle

5

Gib den Stil

display:inline-block;

hoffe das wird helfen '

— Philemon Philip Kunjumon
quelle

4

labelDer Standardmodus displayist inline, dh , die Größe wird automatisch an den Inhalt angepasst. Um eine Breite einzustellen, müssen Sie diese einstellen display:blockund dann einige Änderungen vornehmen, um sie richtig zu positionieren (wahrscheinlich mit float)

— n00dle
quelle