SORU
4 AĞUSTOS 2011, PERŞEMBE


Nasıl etiketi aynı satırda bir giriş elemanı koyabilir miyim?

İ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ı.

http://i.stack.imgur.com/G8rKG.jpg

Bu nasıl CSS kullanarak elde edebilirsiniz?

CEVAP
4 AĞUSTOS 2011, PERŞEMBE


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%
}

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • DominicFear

    DominicFear

    30 Kasım 2006
  • monkophile

    monkophile

    25 Temmuz 2007
  • PaulGBelliveau

    PaulGBellive

    5 Mart 2009