CSS Horizontal Problem przewijania

Question

Problem

muszę treść zmusić do przewijania na osi X, a nie w dół osi Y.

HTML

wiem, że to jest źle sformatowana ale jest generowane dynamicznie i nie ma spacji.

<div class="folderWrapper" id="folderContainer"><div class="folderBox ui-droppable folderBoxSel" onclick="folderSelected(0)" id="fBox0"><div class="counter" id="fCount0">4</div><div class="folderName">Unsorted</div></div><div class="folderBox ui-droppable" onclick="folderSelected(1)" id="fBox1"><div class="counter" id="fCount1">0</div><div class="folderName">test</div></div><div class="folderBox" onclick="folderSelected(1)" id="fBox1"><div class="counter" id="fCount1">0</div><div class="folderName">test</div></div><div class="folderBox" onclick="folderSelected(1)" id="fBox1"><div class="counter" id="fCount1">0</div><div class="folderName">test</div></div><div class="folderBox" onclick="folderSelected(1)" id="fBox1"><div class="counter" id="fCount1">0</div><div class="folderName">test</div></div><div class="folderBox" onclick="folderSelected(1)" id="fBox1"><div class="counter" id="fCount1">0</div><div class="folderName">test</div></div></div> 

ładnie sformatowany z jednego folderu wewnętrznym kartonie:

<div class="folderWrapper" id="folderContainer"> 
    <div class="folderBox ui-droppable folderBoxSel" onclick="folderSelected(0)" id="fBox0"> 
     <div class="counter" id="fCount0">4</div> 
     <div class="folderName">Unsorted</div> 
    </div> 
</div> 

CSS

.folderWrapper{ 
    overflow-x:scroll; 
    overflow-y:hidden; 
    height:85px; 
    white-space:nowrap; 
    margin-bottom:5px; 
} 
.folderBox{ 
    float:left; 
    background-image:url(../images/artworking/folder.png); 
    background-position:center top; 
    background-repeat:no-repeat; 
    width:85px; 
    height:55px; 
    position:relative; 
    padding:5px; 
    z-index:4; 
    white-space:nowrap; 
} 
.folderBox:hover{ 
    cursor: pointer; 
} 

Dzięki jeśli ktoś może pomóc!

Edit

odpowiedź Bazzz męska działa we wszystkich przeglądarkach z wyjątkiem trybu IE Kompatybilność (niestety musi być kompatybilny), co daje następujący wygląd:

z IE Hack:

Answer 1

Zastosowanie inline-block na FolderBox zamiast float:left

spacje: no-wrap nie działa elementów pływających, to działa na elementach inline.

dla IE 7 znalazłem trochę hack, który może ci pomóc:

http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

spróbować tej CSS:

.folderBox{ 
display: inline-block; 
zoom: 1; 
*display: inline; 
} 

najnowszego EDIT:

ten css działa w trybie IE 8 compat (standard IE7):

.folderWrapper{ 
    overflow-x: scroll; 
    overflow-y: hidden; 
    height:85px; 
    width: 300px; /* not really your css, I used it in my test case */ 
    white-space:nowrap; 
} 
.folderBox{ 
    display: inline-block; 
    zoom: 1; 
    *display: inline; 
    background-image:url(../images/artworking/folder.png); 
    background-position:center top; 
    background-repeat:no-repeat; 
    width:85px; 
    height:55px; 
} 

Uważam, że nie przepełniony problem w IE7 leży w position:relative, którego używasz. Usunąłem go i kilka innych css, a teraz działa.

Answer 2

chciałbym tworzyć HTML jak:

<div id="folderWrapper"> 
    <ul id="folderList"> 
     <li class="folderBox">...</li> 
     <li class="folderBox">...</li> 
     <li class="folderBox">...</li> 
    </ul> 
</div> 

i CSS:

#folderWrapper { 
    position:relative; 
    z-index:1; 
    width:300px; 
    overflow:hidden; 
} 
#folderList { 
    position:absolute; 
    z-index:2; 
    width:20000px; 
} 
.folderBox { 
    float:left; 
} 

a następnie użyć paska przewijania w oparciu jquery wewnątrz #folderWrapper: http://www.net-kit.com/jquery-custom-scrollbar-plugins/

Lubię JScrollPane.