горизонтальная прокрутка div и позиционирование дочерних элементов

Question

Не так просто, как может показаться.

У меня есть прокручиваемый по горизонтали div, содержимое внутри динамично и может меняться.

То, что мне удалось сделать до сих пор, это заставить его корректно вести себя в webkit, но старайтесь, как я мог, он не будет работать должным образом ни в firefox, opera и, вероятно, в IE.

Структура довольно проста, контейнер, относительно позиционированный родительский элемент и ul с элементами списка внутри.

<div class="extra-holder"> 
    <div class="extra-holder-inner"> 
     <ul>   
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li>    
     </ul> 
    </div> 
</div> 


.extra-holder { 
    height: 160px; 
    display: block; 
    width: 100%; 
    overflow: hidden; 
    overflow-x: auto; 
    white-space: nowrap; 
    z-index: 41; 

    line-height: 1; 
    background-color: white; 
    position: fixed; 
    border-bottom: 1px solid #d7d7d7; 
    -webkit-transition-duration: .2s; 
    -o-transition-duration: .2s; 
    -moz-transition-duration: .2s; 
    transition-duration: .2s; 
} 

.extra-holder-inner { 
    position: relative; 
    display: inline-block; 
} 

.extra-holder ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

.extra-holder ul li { 
    margin: 0; 
    padding: 0; 
    float: left; 
    height: 140px; 
    width: 300px; 
    white-space:normal; 
    border-left: 1px solid #d7d7d7; 
    margin-top: 10px; 
    padding-left: 20px; 
    padding-right: 20px; 
} 

Проблема в том, что элементы списка, кажется, обертываются, мне нужны все они в строке, которую пользователи могут прокручивать.

Я сделал jsfiddle, чтобы вы могли получить лучшую идею.

http://jsfiddle.net/QFnVk/

в хроме - можно прокручивать влево в светлячок/правый - элементы списка отображения столько, сколько ширина окна просмотра позволяет, затем укладывают ниже.

Answer 1

В вашем .extra-holder ul li правило, попробуйте заменить float: left; с display: inline-block;

Вот ваш updated fiddle работает в Firefox