CSS Горизонтальная прокрутка проблема

Question

Проблема

мне нужно содержание, чтобы заставить прокручивать по оси X, а не вниз по оси Y.

HTML

Я знаю, что это плохо отформатирован, но это динамически и не имеет никакого пустого пространства.

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

отформатированный красиво с одной папки внутренней коробки:

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

Спасибо, если кто-то может помочь!

Редактировать

ответ Bazzz работает во всех браузерах, кроме режиме совместимости IE (несчастливо он должен быть совместим), который дает следующий вид:

С IE хак:

Answer 1

Использование inline-block на вашем FolderBox вместо float:left

пробельные: нет-обертка не работает на плавающих элементов, он работает на встроенных элементах.

Для IE 7, я нашел маленький хак, который может помочь вам:

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

попробовать этот CSS:

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

Последнее редактирование:

Этот CSS работает в режиме совместимости IE 8 (стандарт 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; 
} 

Я считаю, что проблема с переполнением в IE7 лежит в используемом вами position:relative. Я удалил его и еще один css, и теперь он работает.

Answer 2

Я хотел бы создать HTML, как:

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

и CSS:

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

, а затем использовать полосы прокрутки на основе JQuery внутри #folderWrapper: http://www.net-kit.com/jquery-custom-scrollbar-plugins/

Мне нравится JScrollPane.