lebar label css tidak berpengaruh

112

Saya memiliki formulir umum, yang ingin saya beri gaya untuk menyelaraskan label dan bidang masukan. Untuk beberapa alasan saat saya memberikan lebar ke pemilih label, tidak ada yang terjadi:

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

Keluaran:

masukkan deskripsi gambar di sini

jsFiddle

Apa yang saya lakukan salah?

html css label Yang satu
sumber

Ngomong-ngomong, apakah membungkus bagian formulir dalam <p>tag merupakan ide yang bagus?

JGallardo

215

Lakukan display: inline-block:

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

http://jsfiddle.net/aqMN4/

Davis
sumber

1

Tetap dengan Inline-block. Mengujinya di IE7, IE8, IE9, FF

Davis

1

Apakah ada solusi untuk menempatkan setiap elemen dalam <p>?

Colin D

1

@ColinD Saya akan merekomendasikan menggunakan divs, bukan <p> tag.

Davis

37

Menggunakan display: inline-block;

Penjelasan:

The labelis an inline element, artinya ukurannya hanya sebesar yang dibutuhkan.

Setel displayproperti ke salah satu inline-blockatau blockagar widthproperti diterapkan.

Contoh:

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

Luaskan cuplikan

pengguna
sumber

1

Terima kasih! blok-inline adalah yang saya butuhkan. Blok membuatnya terlihat aneh.

TheOne

2

Ketahuilah bahwa dukungan inline-block samar-samar di IE di bawah IE8 - mungkin tidak terlalu menjadi masalah akhir-akhir ini, tetapi sesuatu yang perlu diingat. (sumber quirksmode.org/css/display.html )

n00dle

1

@PandaWood Maaf sudah hampir 2 tahun sejak Anda mengomentari kiriman ini. Tapi, komentar anda saya balas agar pembaca lainnya tidak salah kaprah dengan penjelasan yang diberikan oleh penulis postingan ini. Yang terakhir beralasan bahwa labelelemen tidak menghormati widthproperti karena merupakan elemen inline. Saya ingin menunjukkan bahwa inputelemen tersebut juga merupakan elemen sebaris secara default. Tapi itu memungkinkan lebarnya diubah menggunakan properti lebar tidak seperti labelelemen. Karenanya alasan penulis tidak benar.

ghd

6

Saya percaya label itu sebaris, sehingga tidak mengambil lebar. Mungkin coba gunakan "display: block" dan pergi dari sana.

Mike
sumber

6

Buat blok terlebih dahulu, lalu melayang ke kiri untuk berhenti mendorong blok berikutnya ke baris baru.

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

ctrl-alt-dileep
sumber

5

berikan gaya

display:inline-block;

semoga ini membantu '

Filemon philip Kunjumon
sumber

4

labeldisplayModus default adalah inline, yang berarti secara otomatis menyesuaikan ukuran isinya. Untuk mengatur lebar Anda harus mengatur display:blockdan kemudian melakukan beberapa faffing agar posisinya benar (mungkin melibatkan float)

n00dle
sumber

lebar label css tidak berpengaruh

Jawaban: