İsterim put label input[type=text] aynı satırda, ve istiyorum için input'In genişliğini doldurmak için kalan genişlik içeren bir element, ne olursa olsun uzunluğu ile etiket metni (bakınız ilk resim).

input ama statik bir genişlik var gibi göründüğü için width: auto; kullanmaya çalıştım. Ben de yeni bir satır (ikinci resim) input hareket width: 100%;, ama çalıştı.

Bu nasıl CSS kullanarak elde edebilirsiniz?

JavaScript olmadan mümkün, bkz: http://jsfiddle.net/Khmhk/

Bu IE 7 ve tüm modern tarayıcılarda çalışır.

HTML:

<label for="test">Label</label>
<span><input name="test" id="test" type="text" /></span>

CSS:

label {
    float: left
}
span {
    display: block;
    overflow: hidden;
    padding: 0 4px 0 6px
}
input {
    width: 100%
}

overflow: hidden neden bu kadarsihirli bir şekilde yararlıbu durumda explained here.

display: table-cell bir seçenek bakın: http://jsfiddle.net/Khmhk/1/

works in IE8 ve tüm modern tarayıcılar bu:

HTML:

<div class="container">
    <label for="test">Label</label>
    <span><input name="test" id="test" type="text" /></span>
</div>

CSS:

.container {
    display: table;
    width: 100%
}
label {
    display: table-cell;
    width: 1px;
    white-space: nowrap
}
span {
    display: table-cell;
    padding: 0 0 0 5px
}
input {
    width: 100%
}