Diyelim ki böyle bir html parçacığını var ki:

<div style="width:300px;">
    <label for="MyInput">label text</label>
    <input type="text" id="MyInput" />
</div>

Bu tam benim kod değil, ama önemli olan bir etiket ve sabit genişlikte bir kap içinde aynı satırda metin bir giriş var. Nasıl giriş etiket boyutu bilmeden sarma olmadan ve kabın kalan genişliği doldurmak için stil miyim?

Burada JavaScript veya masa düzeni kesmek kullanmadan basit ve temiz bir çözüm. Bu cevap benzer: Input text auto width filling 100% with other elements floating

Önemli display:block hangi bir zaman dilimi ile giriş alanı sarın. Sonraki şey düğmesine ilk gelen ve giriş alanında ikinci olmuştur.

Sonra sağdaki düğmeyi süzülebilirsin ve giriş alanında kalan alanı doldurur.

HTML

<form method="post">
     <button>Search</button>
     <span><input type="text" title="Search" /></span>
</form>

CSS

form {
    width: 500px;
    overflow: hidden;
    background-color: yellow;
}
input {
    width: 100%;
}
span {
    display: block;
    overflow: hidden;
    padding-right:10px;
}
button {
    float: right;
}

Basit bir keman: http://jsfiddle.net/v7YTT/90/

Güncelleme 1:Eğer web siteniz modern tarayıcılar sadece hedeflemiş, flexible boxes kullanmanızı öneririm. Burada the current support görebilirsiniz.

Güncelleme 2:Bu bile girdi alanı ile tam paylaşan birden fazla düğme veya diğer elemanları ile çalışır. Burada an example.