chiều rộng nhãn css không có hiệu lực

Tôi có một biểu mẫu chung, tôi muốn tạo kiểu để căn chỉnh các nhãn và các trường đầu vào. Vì một số lý do khi tôi cung cấp chiều rộng cho bộ chọn nhãn, không có gì xảy ra:

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

Đầu ra:

jsFiddle

Tôi đang làm gì sai?

Làm display: inline-block:

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

http://jsfiddle.net/aqMN4/

Sử dụng display: inline-block;

Giải trình:

Là labelmột phần tử nội tuyến, có nghĩa là nó chỉ lớn đến mức cần thiết.

Đặt thuộc displaytính thành một trong hai inline-blockhoặc blockđể thuộc widthtính có hiệu lực.

Thí dụ:

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

Tôi tin rằng các nhãn nằm trong dòng và vì vậy chúng không có chiều rộng. Có thể thử sử dụng "display: block" và bắt đầu từ đó.

Đặt nó thành một khối trước, sau đó thả trôi sang trái để dừng đẩy khối tiếp theo sang một dòng mới.

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

đưa ra phong cách

display:inline-block;

hy vọng điều này sẽ giúp ích '

labeldisplayChế độ mặc định của nó là inline, có nghĩa là nó tự động định cỡ cho nội dung của nó. Để đặt chiều rộng, bạn sẽ cần đặt display:blockvà sau đó thực hiện một số thao tác để đặt nó đúng vị trí (có thể liên quan đến float)