Bir giriş alanı nasıl yapılır% 100 genişlik eksi gönderme düğmesinin genişliği eksi var mı?

Question

Çok basit bir tek giriş alanım yanında 'gönder' butonu var. Arama butonunun sabit genişliği 104 pikseldir. Her ikisi de tarayıcı görüntü alanının toplam genişliğinin% 50'siyle birlikte sarılır. Tarayıcı penceresi büyüdükçe giriş alanının büyütülmesine izin verme planımdır.

Şu anda, belirli bir tarayıcı pencerem için, sarmalayıcının solundan gönder düğmesinin soluna yayılacak şekilde giriş alanının genişliğini düzeltmek zorundayım. Bununla birlikte, pencereyi yeniden boyutlandırdığımda, (açıkça) buna göre ayarlanmaz ve dolayısıyla beyaz boşluk boşluğunu bırakır.

Bu soruya başka hiçbir yerde yanıt bulamadım. Genelde, 104px'lik doğru bir dolgu ile% 100'lük bir genişliğin, diğer in-line elemanlarla bu tür bir sorunu çözeceğinin farkındayım. Şimdilik, buradaki sorun, düğmenin dolgunun üzerine oturamayacağı ve bunun yerine yeni bir satıra taşınacağıdır.

Bunu nasıl çözebilirim? Teşekkürler!

DÜZENLEME: Şimdiye kadar sahip olduğum şeyler. Jsfiddle.net/nWCT8/ adresini ziyaret edin. Tüm sarıcının ortalanması ve çoğunluğu tarayıcı desteğine sahip olması gerekir (bununla birlikte IE6'nın çalışmayacağı konusunda bir fikrim yok). Bu nedenle, 'calc' ın oldukça uygun olduğunu düşünmüyorum. Eğer sabit bir yüksekliğe sahip olduğundan

Answer 1

, (eğer ihtiyacınız yoksa IE 6 desteklemek için) Eğer jsfiddle üzerinde bunu başarmak için

DÜZENLEME güncelleme cevabım tabanını absolute pozisyon kullanabilirsin ama yapabilseydim Şu anda mevcut Chrome, Safari ve FF'de test edin.

jsfiddle

Eğer 100% genişliğinde olması bunun etrafında sarıcı ve input ihtiyaçlarını kullanmak gerekir FF ile doğru işi genişleterek otomatik almak için. IE 8 ve üstü, Chrome, Opera 7+, Safari 3+, Firefox:

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
-moz-box-sizing: border-box; /* Firefox, other Gecko */ 
box-sizing: border-box;   /* Opera/IE 8+ */ 

box-sizing tarafından desteklenir: input elemanlarının dolgu width aşağıdaki css kurallarına eklenecek önlemek için kullanılması gerekir

DÜZENLEME Şekillendirici input elemanları için padding ve margin bunların tipik olarak problemlidir. siz şu adımları yapmanız gereken css3 calc özelliği olmadan elde etmek istediğiniz sonucu sağlamak için:

1. çevreleyen .form-wrapper için yüksekliğini tanımlamak ve ayarlamak onun kadar bu unsur sorumlu olduğunu positionrelative için içerdiği öğelerin konumu absolute.

2. sarın çevresinde bir kap (.input-wrapper) input elemanı ambalaj her zaman sağ tarafa width of the button bir mesafeye sahip left:0px, top:0px, bottom:0px ve right:[the width of your button] bu şekilde olan absolute konumunu tanımlayan.

3. Seti 100% için input elemanın width ve height. input öğesinin width'a eklenmesini önlemek için box-sizing değerini border-box olarak ayarlamanız gerekir.

4. Seti top:0px, bottom:0px ve right:0 ile absolute için button pozisyonu ve width: [width of your button] CSS3 desteklemek yeni tarayıcılar için

Answer 2

genişliği ayarlayarak, şunu kullanabilirsiniz calc():

width: calc(100% - 50px); // change 50px to width of button 

Answer 3

html:

<div> 
    <input type="text" id="search" /> 
    <input type="button" value="Search" id="button" /> 
    <br class="clear: both;" /> 
</div> 

css: Seçilen cevap çalışıyor

* { 
    padding: 0; 
    margin: 0; 

} 

div { 
    width: 70%; 
    margin: 0 auto;  
    padding: 5px; 
    background: grey;  
} 

#search { 
    width: calc(100% - 110px);   
    float: left; 
} 

#button { 
    width: 104px; 
    float: left;  
} 

jsfiddle

Answer 4

, ancak aşırı karmaşık. cevabını Rewrote FAZLA basit olması:

HTML:

<div class="halfWidth"> 
    <div class="input-wrapper"> 
     <input type="text" placeholder="Input text here"/> 
    </div> 
    <button type="submit">Search</button> 
</div> 

CSS:

.halfWidth { 
    width:50%; 
} 
.input-wrapper { 
    margin-right:100px; 
} 
input { 
    float: left; 
    width: 100%; 
    -ms-box-sizing: border-box; /* ie8 */ 
    -khtml-box-sizing: border-box; /* konqueror */ 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
    box-sizing: border-box; /* css3 rec */ 
} 

Örneği görüntüle at:
http://jsfiddle.net/nWCT8/4/