ความกว้างของฉลาก css ไม่มีผล

ฉันมีแบบฟอร์มทั่วไปซึ่งฉันต้องการจัดรูปแบบเพื่อจัดแนวป้ายกำกับและช่องป้อนข้อมูล ด้วยเหตุผลบางประการเมื่อฉันให้ความกว้างกับตัวเลือกฉลากไม่มีอะไรเกิดขึ้น:

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

ผมทำอะไรผิดหรือเปล่า?

ทำdisplay: inline-block:

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

http://jsfiddle.net/aqMN4/

ใช้ 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>

ฉันเชื่อว่าป้ายกำกับอยู่ในบรรทัดดังนั้นจึงไม่ใช้ความกว้าง อาจลองใช้ "display: block" แล้วไปจากที่นั่น

ทำให้เป็นบล็อกก่อนจากนั้นลอยไปทางซ้ายเพื่อหยุดการดันบล็อกถัดไปไปยังบรรทัดใหม่

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

ให้สไตล์

display:inline-block;

หวังว่านี่จะช่วยได้ '

labeldisplayโหมดเริ่มต้นคือinlineซึ่งหมายความว่ามันจะปรับขนาดให้เข้ากับเนื้อหาโดยอัตโนมัติ ในการตั้งค่าความกว้างคุณจะต้องตั้งค่าdisplay:blockแล้วทำการ faff เพื่อให้อยู่ในตำแหน่งที่ถูกต้อง (อาจเกี่ยวข้องกับfloat)