2011-05-08 26 views
8

Sırası olmayan birçok listeyi (ul) içine alan bir div var. Her bir "float: left" için ayarlıyım. Ayrıca, onları "overflow-x: scroll" olarak ayarlayan üst div'a sahibim. Neler yapılıyorsa, sayfanın kenarına geldiklerinde ve üst div (kaydırma çubukları) kaydırma özelliğinden yararlanmak için yan yana kalmamaları durumunda, sarmalar sarılıyor. Niye ya? Bunu nasıl düzeltebilirim?HTML, taşma: kaydırma ve float

Yardımlarınız için teşekkür ederiz. Eğer UL'lerini süzülüyor Çünkü

cevap

6

Eğer uls toplam genişliği * [uls sayısını]
http://jsfiddle.net/seler/gAGKh/ width = [ul genişliğini] vermek ya sayarız hangi başka div bu ULS eklemek gerekir http://jsfiddle.net/seler/gAGKh/1/

+1

Bir iç div oluşturmak çok yardımcı olur. Uygun genişlik hesaplamak için JS kullanmak yerine, yeni iç divun statik genişliğini, en aşırı durumun hesaba katılması için yeterince geniş bir genişliğe ayarlamanın yerleşime zarar vermeyeceğini buldum. Teşekkürler seler. – s2cuts

+0

@ S2cuts sadece sabit ul genişliğinde ve sabit ul numaranız varsa çalışabilir. – seler

+1

Kötü javascript düzeltme, ddlshack tarafından açıklanan cevap daha temiz bir çözümdür. – user1226868

4

, onlar üst div genişletmek olmayacak şekilde artık akış belgede bulunmayan (dolayısıyla sarma.)

verir üst div üzerinde açık bir genişlik ayarlamayı deneyin hepsi için yan yana var olmak. Ayrıca, üst div içindeki UL'leri temizlemezseniz, büyük olasılıkla, dikey olanlarda da sorunlara yol açmayacaksınız demektir. Emin temizledikten yüzen olun :)

+0

açıklama benim sorgunun parçası oldu, teşekkür ederim. "Şamandıralarınızı temizlediğinizden emin olun" ile ne demek istediğini açıklayabilir misiniz? – s2cuts

+0

@ s2cuts Ana kaplarınızı içeriğin yüksekliğine genişletmek için [clearfix] (http://www.webtoolkit.info/css-clearfix.html) gibi bir şey kullandığınızdan emin olun. Aksi takdirde, yatay genişlikte yaşadığınız sorunlara benzer dikey yükseklikteki sorunlara yönelirsiniz. Sadece bir kafa. – Tim

0

Sen gerekir:

  1. <li> da yüzer olun.
  2. Her genişliğe <ul> olarak ayarlayın.
  3. Sabit genişliği, tüm listeleri saklayacak kadar içeren şekilde ayarlayın. Örneğin

:

ul { width: 250px; } 
li { margin-left: 5px; } 
ul, li { float: left; } 
div { overflow-x: scroll; width: 750px; } 

Test case.

6

Sen liste öğelerinizi görüntülenecek şekilde ayarlayabilirsiniz: satır içi blok, sonra beyaz boşluk kullanın: nowrap. Çoğu modern tarayıcıda çalışır.

http://jsfiddle.net/gAGKh/22/

İlgili konular