it-swarm.com.de

CSS-Etikettenbreite wird nicht wirksam

Ich habe ein generisches Formular, das ich gerne stylen würde, um die Beschriftungen und die Eingabefelder auszurichten. Aus irgendeinem Grund passiert nichts, wenn ich der Etikettenauswahl 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:

enter image description here

Was mache ich falsch?

101
TheOne

Machen display: inline-block:

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

http://jsfiddle.net/aqMN4/

198
Davis

Verwenden display: inline-block;

Erklärung:

Das label ist ein Inline-Element, das heißt, es ist nur so groß, wie es sein muss.

Setzen Sie die Eigenschaft display auf inline-block oder block, damit die Eigenschaft width 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>
35
Quantastical

Ich glaube, dass Labels inline sind und daher keine Breite haben. Vielleicht versuchen Sie es mit "display: block" und gehen von dort aus.

6
Mike

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
}
6
ctrl-alt-dileep

gib den Stil

display:inline-block;

hoffe das wird helfen

Der voreingestellte label - Modus von display ist inline, was bedeutet, dass sich die Größe automatisch dem Inhalt anpasst. Um eine Breite einzustellen, müssen Sie display:block und dann etwas faffing, um es richtig zu positionieren (wahrscheinlich mit float)

4
n00dle