Сделать список всегда отображать одну строку элементов в фиксированной ширине div

Question

Я изо всех сил стараюсь, чтобы список всегда отображал элементы только в 1 строке.

Чтобы лучше это понять, позвольте мне сначала показать некоторый код:

Структура HTML такая:

<div id="tab-content">
 <div id="part-list">
    <ul>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
    </ul>
  </div>
</div>

Стиль CSS такой:

#tab-content{
                    overflow: auto;
                    height: 100%;
                    position:relative;
                    background-color: #373837;
                    color: white;
                    padding-left:20px;
                    padding-right:20px;
          }

#tab-content ul{
                    display: block;
                    list-style: none outside none;
                   overflow: auto;
                   white-space: nowrap;

          }
          #tab-content ul li{
                    display: block;
                    float: left;
                    padding: 7px;
                    margin-right: 4px;
                    font-style: italic;
                    color: #cccccc;
          }

Мне нужно, чтобы ul располагал свои элементы на 1 строке, независимо от того, становится ли он больше, чем содержащий div.Если он становится больше, чем должна появиться полоса прокрутки.Прямо сейчас он просто упакован ..

Я использую jscrollPane в # part-list, потому что там у меня есть собственная полоса прокрутки.

PS: указание большей ширины, чем содержащий div, скажем 150%, не является решением, поскольку содержимое списка извлекается из БД, а его длина является динамической.

Answer 1

Измените float:left на display:inline.Пример: http://jsfiddle.net/LgKsY/

#tab-content ul li{
    display: inline;
    padding: 7px;
    margin-right: 4px;
    font-style: italic;
    color: #cccccc;
}

Однако при изменении его с block на inline ваши отступы / рост будут казаться другимиЗдесь они задают высоту на ul, скажем, 30px, а затем высоту строки того же значения, то есть 30px на li.Я также удалил overflow:auto из ul в этой версии, так как он является избыточным, потому что div уже выполняет эту работу.2-й пример: http://jsfiddle.net/LgKsY/1/

Answer 2

Используйте css display:inline-block; вместо display:block и с display:inline-block используйте *float:left !important; /* For IE 7*/ и _float:left !important; /* For IE 6*/. Потому что disaply:inline-block; не поддерживает IE 6 и 7.

Другое решение, вы можете использовать float:left для всех браузеров, вместо этого, используя display:inline-block