width: auto untuk bidang <input>

122

Pertanyaan CSS pemula. Saya pikir width:autosebuah display:blockelemen berarti 'mengisi ruang yang tersedia'. Namun untuk suatu <input>elemen, tampaknya tidak demikian. Sebagai contoh:

<body>
<form style='background-color:red'>
<input type='text' style='background-color:green;display:block;width:auto'>
</form>
</body>

Dua pertanyaan kemudian:

  1. Apakah ada definisi yang tepat tentang apa lebar: otomatis artinya? Spesifikasi CSS tampak tidak jelas bagi saya, tetapi mungkin saya melewatkan bagian yang relevan.

  2. Apakah ada cara untuk mencapai perilaku yang saya harapkan untuk bidang masukan - yaitu. mengisi ruang yang tersedia seperti elemen level blok lainnya?

Terima kasih!

css richb
sumber
kemungkinan duplikat input dengan tampilan: blok bukan blok, mengapa tidak?
Phrogz
@ Phrogz Ya itu adalah duplikat. Saya mencari tetapi tidak menemukannya. Terima kasih.
richb

Jawaban:

88

Sebuah <input>lebar 's dihasilkan dari nya sizeatribut. Default-nya sizeadalah yang mendorong lebar otomatis.

Anda dapat mencoba width:100%seperti yang diilustrasikan dalam contoh saya di bawah ini.

Tidak mengisi lebar:

<form action='' method='post' style='width:200px;background:khaki'>
  <input style='width:auto' />
</form>

Lebar isian:

<form action='' method='post' style='width:200px;background:khaki'>
  <input style='width:100%' />
</form>

Ukuran lebih kecil, lebar lebih kecil:

<form action='' method='post' style='width:200px;background:khaki'>
  <input size='5' />
</form>

MEMPERBARUI

Inilah yang terbaik yang bisa saya lakukan setelah beberapa menit. Ini 1px off di FF, Chrome, dan Safari, dan sempurna di IE. (Masalahnya adalah # ^ & * IE menerapkan batas secara berbeda dari orang lain sehingga tidak konsisten.)

<div style='padding:30px;width:200px;background:red'>
  <form action='' method='post' style='width:200px;background:blue;padding:3px'>
    <input size='' style='width:100%;margin:-3px;border:2px inset #eee' />
    <br /><br />
    <input size='' style='width:100%' />
  </form>
</div>
Ben
sumber
24
Terima kasih. lebar: 100% bukanlah hal yang sama dengan. Ini akan meluap kotak induk jika ada margin atau perbatasan.
richb
1
Anda dapat secara eksplisit mengatur ini untuk menyesuaikan dengan keinginan Anda, misalnya border:2px inset #eee; margin:-2px. Belum mengujinya sendiri tapi sesuatu seperti itu.
Ben
3
Terima kasih Steve. Anda juga harus memeriksa stackoverflow.com/questions/1030793/… yang memiliki beberapa ide menarik lainnya.
richb
1
Solusi epik untuk lebar yang konsisten melalui css pada bidang masukan, +1
Stephen Sprinkle
11
Anda dapat menggunakan set properti input box-sizing ke border-box untuk menghentikan perbatasan agar tidak tumpang tindih dengan wadah.
nicholas
26

"Apakah ada definisi tentang arti lebar: otomatis? Spesifikasi CSS tampaknya tidak jelas bagi saya, tetapi mungkin saya melewatkan bagian yang relevan."

Tidak ada yang benar-benar menjawab pertanyaan poster asli bagian atas.

Inilah jawabannya: http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/

Selama nilai width adalah auto, elemen dapat memiliki margin horizontal, padding dan border tanpa menjadi lebih lebar dari containernya ...

Di sisi lain, jika Anda menentukan lebar: 100%, lebar total elemen akan menjadi 100% dari blok penampungnya ditambah margin horizontal, padding dan batas ... Ini mungkin yang Anda inginkan, tetapi kemungkinan besar tidak .

Untuk memvisualisasikan perbedaan saya membuat contoh: http://www.456bereastreet.com/lab/width-auto/

tanggapan
sumber
4
jawaban / tautan yang bagus, saya sarankan untuk meletakkan contoh ketiga dengan "box-sizeing: border-box" ...
halfbit
itu bukan untuk masukan dan karena otomatis adalah default, saya tidak melihat bagaimana itu berguna
Barbz_YHOOL
9

Seperti yang dinyatakan dalam jawaban lain, lebar: otomatis tidak berfungsi karena lebar yang dihasilkan oleh atribut ukuran masukan, yang tidak dapat disetel ke "otomatis" atau yang serupa.

Ada beberapa solusi yang dapat Anda gunakan untuk membuatnya berfungsi baik dengan model kotak, tetapi sejauh yang saya tahu tidak ada yang fantastis.

Pertama Anda dapat mengatur padding di lapangan menggunakan persentase, pastikan lebar ditambahkan hingga 100%, misalnya:

input {
  width: 98%;
  padding: 1%;
}

Hal lain yang dapat Anda coba adalah menggunakan pemosisian absolut, dengan kiri dan kanan disetel ke 0. Menggunakan markup ini:

<fieldset>
    <input type="text" />
</fieldset>

Dan CSS ini:

fieldset {
  position: relative;
}

input {
    position: absolute;
    left: 0;
    right: 0;
}

Pemosisian absolut ini akan menyebabkan input mengisi fieldset induk secara horizontal, terlepas dari padding atau margin input. Namun kerugian besar dari ini adalah Anda sekarang harus berurusan dengan ketinggian fieldset, yang akan menjadi 0 kecuali Anda mengaturnya. Jika semua input Anda memiliki tinggi yang sama, ini akan bekerja untuk Anda, cukup atur tinggi fieldset ke berapa pun tinggi input yang seharusnya.

Selain ini ada beberapa solusi JS, tetapi saya tidak suka menerapkan gaya dasar dengan JS.

Jon Raasch
sumber
8

Karena input's widthdikendalikan oleh itu sizeatribut, ini adalah bagaimana saya menginisialisasi sebuah input widthmenurut isinya:

<input type="text" class="form-list-item-name" [size]="myInput.value.length" #myInput>
Fabricio
sumber
1
Meskipun #angularjawaban khusus ini bukan jawaban yang valid untuk pertanyaan OP (dan saya tidak menaikkan suara), saya datang ke topik ini hanya untuk menemukan ide khusus ini.
nobug
5

Ini mungkin tidak persis seperti yang Anda inginkan, tetapi solusi saya adalah menerapkan gaya autowidth ke div pembungkus - lalu atur input Anda ke 100%.

mwilcox.dll
sumber
0

Satu-satunya pilihan yang dapat saya pikirkan adalah menggunakan width:100%. Jika Anda ingin memiliki padding pada kolom input juga, daripada hanya menempatkan wadah labeldi sekitarnya, pindahkan pemformatan ke label itu, sementara juga tentukan padding ke label. Bidang masukan kaku.

Lajos Meszaros
sumber
0

Jawaban 1 - "respon" memberikan jawaban / link yang bagus untuk itu. Singkatnya, "auto" adalah defaultnya, jadi ini seperti menghilangkan setiap perubahan pada lebar sebuah elemen

Jawaban 2 - gunakan width: 100%saja. Ini akan mengisi 100% dari wadah induk, dalam hal ini, "formulir".

Akhil Gupta
sumber
-4

Tautan yang benar-benar luar biasa yang menggambarkan fitur luar biasa yang mutlak:

https://css-tricks.com/snippets/css/a-guide-to-flexbox

https://www.htmllion.com/css-flexbox.html

Intinya:

  1. Taruh elemen dalam wadah dengan display: flex;.
  2. Ditetapkan flex-grow: 1;pada setiap elemen yang terkandung.
  3. Jika Anda memiliki elemen di dalamnya yang berisi elemen yang juga perlu berkembang, ulangi langkah 1 dan 2 untuk elemen tertampung dan elemen turunannya (terkandung).
  4. Beradaptasi dan sesuaikan dengan kebutuhan yang bervariasi (lihat tautan).

Edit - contoh : 

<body style="display: flex;">
  <div style="display: flex; flex-grow: 1;">
    <input type="text" style="flex-grow: 1;" />
  </div>
</body>

Andrew
sumber
Bagaimana itu membantu dengan lebar otomatis untuk input?
kernel
@ kernel Sederhana. Lihat contoh.
Andrew
Lebar input selalu 100% dan tidak seminimal mungkin.
kernel
2
Inputnya masih tidak sama lebarnya dengan isinya, yang tadi jadi pertanyaan.
kernel
Jika Anda membaca jawaban yang diterima - dan juga jawaban orang lain - itu berarti sesuatu yang berbeda. Pertanyaannya kemudian adalah "apa yang Anda lakukan dengan benar sehingga semua orang melakukan kesalahan?".
kernel