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;

이것이 도움이되기를 바랍니다. '

label의 기본 display모드는 inline입니다. 즉, 콘텐츠에 맞게 자동으로 크기가 조정됩니다. 너비를 설정하려면 display:block올바르게 배치 되도록 설정 한 다음 약간의 faffing을 수행해야합니다 (아마도 포함 float).