Bisakah saya menghentikan 100% Lebar Kotak Teks dari memanjang di luar wadah mereka?

181

Katakanlah saya memiliki kotak teks yang ingin saya isi satu baris penuh. Saya akan memberikan gaya seperti ini:

input.wide {display:block; width: 100%}

Ini menyebabkan masalah karena lebarnya didasarkan pada isi kotak teks. Kotak teks memiliki margin, batas, & padding secara default, yang membuat kotak teks lebar 100% lebih besar dari kontainernya.

Misalnya, di sini di sebelah kanan:

masukkan deskripsi gambar di sini

Apakah ada cara untuk membuat kotak teks mengisi lebar wadahnya tanpa meluas di luarnya?

Berikut ini beberapa contoh HTML untuk menunjukkan apa yang saya maksud:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <style type="text/css">
        #outer{border: 1px solid #000; width: 320px; margin: 0px;padding:0px}
        #inner{margin: 20px; padding: 20px; background: #999;border: 1px solid #000;}
        input.wide {display:block; margin: 0px}
        input.normal {display:block; float: right}
    </style>
</head>
<body>
    <div id="outer">
        <div id="inner">
            <input type="text" class="wide" />
            <input type="text" class="normal" />
            <div style="clear:both;"></div>
        </div>
    </div>
</body>
</html>

Jika ini dijalankan, Anda dapat melihat dengan melihat kotak teks "normal" bahwa kotak teks "lebar" menonjol di luar wadah. Kotak teks "normal" mengapung ke tepi aktual wadah. Saya mencoba membuat kotak teks "lebar" mengisi wadahnya, tanpa melebar melebihi batas seperti kotak teks "normal".

html css Dan Herbert
sumber

Jawaban:

87

Yang bisa Anda lakukan adalah menghapus "ekstra" default pada input:

input.wide {display:block; width:100%;padding:0;border-width:0}

Ini akan menjaga bagian inputdalam wadahnya. Sekarang jika Anda ingin perbatasan, bungkus inputdalam div, dengan batas ditetapkan pada div(dengan cara itu Anda dapat menghapus display:blockdari inputjuga). Sesuatu seperti:

<div style="border:1px solid gray;">
 <input type="text" class="wide" />
</div>

Sunting: Pilihan lain adalah, alih-alih menghapus gaya dari input, ganti rugi dalam terbungkus div:

input.wide {width:100%;}

<div style="padding-right:4px;padding-left:1px;margin-right:2px">
  <input type="text" class="wide" />
</div>

Ini akan memberi Anda hasil yang agak berbeda di browser yang berbeda, tetapi mereka tidak akan tumpang tindih wadah. Nilai-nilai dalam div tergantung pada seberapa besar perbatasan di inputdan berapa banyak ruang yang Anda inginkan antara inputdan perbatasan.

Hilbrand Bouwkamp
sumber
3
Ini adalah solusi yang sangat kreatif. Satu-satunya masalah yang saya miliki adalah bahwa saya tidak dapat menentukan garis besar pada kotak teks ketika mendapatkan fokus kecuali saya menggunakan JavaScript untuk mengubah batas div pembungkus.
Dan Herbert
@DanHerbert, Anda benar, itu cacat UX utama dari metode ini
Baumr
275

Apakah ada cara untuk membuat kotak teks mengisi lebar wadahnya tanpa meluas di luarnya?

Ya: dengan menggunakan properti 'ukuran-kotak: batas-kotak' properti CSS3, Anda dapat mendefinisikan kembali apa arti 'lebar' untuk menyertakan padding dan border eksternal.

Sayangnya karena ini CSS3, dukungan tidak terlalu matang, dan karena proses spek belum selesai, sementara itu memiliki nama sementara yang berbeda di browser. Begitu:

input.wide {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

Alternatif jadul hanya untuk menempatkan jumlah 'padding-right' pada elemen <div> atau <td> yang terlampir sama dengan tentang berapa banyak padding kiri-dan-kanan / batas dalam 'px' menurut Anda browser akan berikan input. (Biasanya 6px untuk IE <8.)

bobince
sumber
Ini akan berhasil, kecuali tidak dapat menggunakan ini karena saya menargetkan perangkat seluler yang mungkin tidak akan mendukung ini selama bertahun-tahun. : - \
Dan Herbert
20
Saya pikir perangkat seluler akan memiliki dukungan HTML5 penuh sebelum komputer.
Mariano Cavallo
4
@Indred: pasti tidak jika Anda menyertakan IEMobile dan Blackberry dalam hal itu.
bobince
1
Ini memiliki dukungan luar biasa untuk browser desktop, meskipun: quirksmode.org/css/contents.html
logan
2
Bagaimana saya membutuhkan waktu selama ini untuk menemukan buttersauce yang luar biasa ini ??? Bisakah kita menjadikan ini jawaban yang diterima?
streetlogics
14

Ini memecahkan masalah bagi saya!

Tanpa perlu div eksternal. Cukup terapkan ke kotak teks yang Anda berikan.

box-sizing: border-box;

Dengan properti ini "Properti lebar dan tinggi (dan properti min / maks) mencakup konten, bantalan, dan tepian, tetapi bukan margin"

Lihat deskripsi properti di w3schools .

Semoga ini bisa membantu seseorang!

Jack Trowbridge
sumber
Sangat sederhana! Terima kasih!
nurider
10

Baru saja menemukan masalah ini sendiri, dan satu-satunya solusi yang dapat saya temukan yang berfungsi di semua browser pengujian saya (IE6, IE7, Firefox) adalah sebagai berikut:

  1. Bungkus bidang input dalam dua DIV terpisah
  2. Atur DIV bagian luar menjadi lebar 100%, ini mencegah wadah kami meluap dari dokumen
  3. Letakkan padding di DIV bagian dalam jumlah yang tepat untuk mengimbangi overflow input secara horizontal.
  4. Setel padding khusus pada input sehingga melimpah dengan jumlah yang sama seperti yang saya ijinkan dalam DIV bagian dalam

Kode:

<div style="width: 100%">
    <div style="padding-right: 6px;">
        <input type="text" style="width: 100%; padding: 2px; margin: 0;
                                  border : solid 1px #999" />
    </div>
</div>

Di sini, total horizontal overflow untuk elemen input adalah 6px - 2x (padding + border) - jadi kami menetapkan padding-right untuk DIV bagian dalam 6px.

Tobias Cohen
sumber
tambahkan ke elemen input padding 8px dan tidak berfungsi lagi
JuHwon
7

dukungan ukuran kotak sebenarnya cukup bagus: http://caniuse.com/#search=box-sizing

Jadi, kecuali Anda menargetkan IE7, Anda harus dapat memecahkan masalah seperti ini menggunakan properti ini. Lapisan seperti sass atau kurang memudahkan untuk menangani aturan awalan seperti itu, btw.

chikamichi
sumber
3

Sebenarnya, itu karena CSS mendefinisikan 100% relatif terhadap seluruh lebar wadah, termasuk margin, batas, dan lapisannya; itu berarti bahwa ruang berhasil. untuk isinya adalah jumlah yang lebih kecil dari 100%, kecuali wadah tidak memiliki margin, batas, atau lapisan.

Ini kontra-intuitif dan dianggap oleh banyak orang sebagai kesalahan yang sekarang kita terjebak . Ini secara efektif berarti bahwa% dimensi tidak baik untuk apa pun selain wadah tingkat atas, dan bahkan kemudian, hanya jika itu tidak memiliki margin, batas atau bantalan.

Perhatikan bahwa margin, batas, dan padding bidang teks adalah termasuk dalam ukuran CSS yang ditentukan untuk itu - itu adalah wadah yang membuang hal-hal.

Saya telah lumayan mengatasinya dengan menggunakan 98%, tapi itu adalah solusi yang kurang sempurna, karena bidang input cenderung semakin pendek karena wadah semakin besar.

EDIT: Saya menemukan pertanyaan serupa - Saya belum pernah mencoba jawaban yang diberikan, dan saya tidak tahu pasti apakah itu berlaku untuk masalah Anda, tetapi sepertinya itu akan terjadi.

Lawrence Dol
sumber
1

Salah satu solusi yang mungkin berhasil (berfungsi untuk saya) adalah menerapkan margin negatif pada input (kotak teks) ... atau lebar tetap untuk ie7 atau untuk menjatuhkan dukungan ie7. Ini menghasilkan pixel perfect width .. Bagi saya 7 nya jadi saya menambahkan 3 dan 4 tetapi masih pixel perfect ..

Saya memiliki masalah yang sama dan saya benci memiliki divs tambahan untuk perbatasan dll!

Jadi, inilah solusi saya yang sepertinya berhasil!

Anda harus menggunakan stylesheet ie7 only untuk menghindari starhacks. 

input.text{
    background-color: #fbfbfb;
    border : solid #eee 1px;
    width: 100%;
    -box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 32px;

    *line-height:32px;
    *margin-left:-3px;
    *margin-right:-4px;
    display: inline;   
    padding: 0px 0 0 5px;

}
GorillaApe
sumber
1

Jika Anda tidak dapat menggunakan, box-sizing:border-boxAnda dapat mencoba menghapus width:100%dan meletakkan sizeatribut yang sangat besar di <input>elemen, namun kekurangannya adalah Anda harus memodifikasi html, dan tidak dapat melakukannya dengan CSS saja:

<input size="1000"></input>
siddhadev
sumber
0

Jika Anda tidak perlu melakukannya secara dinamis (misalnya, formulir Anda memiliki lebar tetap), Anda dapat mengatur lebar <input>elemen anak dengan lebar wadahnya dikurangi dekorasi seperti bantalan, margin, perbatasan, dll .:

 // the parent div here has a width of 200px:
.form-signin input[type="text"], .form-signin input[type="password"], .form-signin input[type="email"], .form-signin input[type="number"] {
  font-size: 16px;
  height: auto;
  display: block;
  width: 280px;
  margin-bottom: 15px;
  padding: 7px 9px;
}
Avishai
sumber
0

Jika Anda tidak dapat menggunakan ukuran kotak (mis. Saat Anda mengonversi HTML ke PDF menggunakan iText). Coba ini:

CSS

.input-wrapper { border: 1px solid #ccc; padding: 0 5px; min-height: 20px; } 
.input-wrapper input[type=text] { border: none; height: 20px; width: 100%; padding: 0; margin: 0; }

HTML

<div class="input-wrapper">
     <input type="text" value="" name="city"/>
</div>
robertad
sumber
0

Ini bekerja:

<div>
    <input type="text" 
        style="margin: 5px; padding: 4px; border: 1px solid; 
        width: 200px; width: calc(100% - 20px);">
</div>

'Lebar' pertama adalah aturan fallback untuk browser lama.

Mo'in Creemers
sumber
0

Cukup masukan gaya untuk mengimbangi bantalan tambahan. Dalam contoh berikut, padding pada input akan 10px di kiri dan kanan untuk offset padding total 20px:

input[type=text]{
   width: calc(100% - 20px);
}
quinlo
sumber