2011-05-05 22 views
6

Bir ebeveyn div içinde, sol tarafta bir metin etiketi ve sağdaki bir kaydırıcıyı (jQuery UI kullanarak) istiyorum. Kaydırıcının mevcut tüm alanı almasını isterim.jQuery UI kaydırıcısının yanındaki metin etiketi

<div id="parentDiv" style="width:800px"> 
<span>Unicorn awesomeness:</span><div id="unicornSlider"></div> 
</div> 

Ama FF3 & IE7/8 Chrome'da çalışır kolayca bir şey elde edemezsiniz:

Yani kavramsal olarak baktığım görünümdür. Nispeten düzgün bir çözüm var mı? İdeal olmasa bile, işleri daha kolay hale getiriyorsa, kaydırıcıyı sabit bir genişlikte yapmak için yerleşeceğim.

cevap

8

Ben

İşte yukarıda belirtilen tarayıcılarda çalışan bir% genişliğini kullanıldığı bir örnek genişliği belirtmeden satır içi efekt elde etmek için çok yanıltıcıdır olacağını düşünüyorum (IE7 oldu merkezin dışına astar biraz etiket ve kaydırıcı yukarı ama ben bunu denedim ve IE8 sonraki satırda süzülüyor div koymak eminim) aynı satırda hala

http://jsfiddle.net/pxfunc/D7b7F/

#unicornSlider {float:right;width:80%;} 
+0

tuhaftı. Belki biraz daha ince fark. Aslında şu anda geçici bir "işe yarayan" çözüm olarak bir tablo kullanıyorum (evet, biliyorum). –

+3

da dikkat çekmeye değer, 'display: inline-block;' potansiyel olarak da "float: right" yerine çalışır. Http://jsfiddle.net/pxfunc/D7b7F/1/ adresine bakın. – MikeM