VPF::Горизонтальный scroll - Форум программистов

BloodWizard

Дата 5.8.2011, 08:35 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 40
Регистрация: 26.10.2010

Репутация: нет
Всего: нет

У меня есть блок в нутри которого список списко:

Код


<div id=\"params_list\">
<ul>
    <li class="1">
        <ul>
            <li>
                1.1
            </li>
            <li>
                1.2
            </li>
            <li>
                1.3
            </li>
        </ul>
    </li>
    <li class="2">
        <ul>
            <li>
                2.1
            </li>
            <li>
                2.2
            </li>
            <li>
                2.3
            </li>
        </ul>
    </li>
</ul>
</div>

и так далее...
Необходимо сделать так чтобы всё это было в одну строку и с горизонтальной прокруткой...

Код


#params_list{
    top:0;
    left:0;
    width:700;
    height:33px;
    margin:10px 1px;
    float:left;
    border:1px solid red;
    white-space: nowrap;
    overflow:scroll;
    position:relative;
}

#params_list > ul{
    position:relative;
    display:block;
    height:23px;
    float:left;
}
#params_list > ul > li > ul {
    display:block;
    float:left;
    height:23px;
}

#params_list > ul > li, 
#params_list > ul > li  > ul > li{
    display:block;
    float:left;
    height:23px;
}

Это сообщение отредактировал(а) BloodWizard - 5.8.2011, 08:42

mcTep

Дата 5.8.2011, 10:06 (ссылка)

(голосов:1)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 203
Регистрация: 25.2.2009

Репутация: 3
Всего: 6

Ничего кроме этого не надо:

Код


<style>
ul, li {
    margin:0;
    padding:0;
    display: inline-block;
    zoom:1;
}
    
#params_list {
    white-space: nowrap;
    width: 100%;
    overflow: auto;
}
</style>

Чтобы работал white-space: nowrap; необходимо, чтобы внутренние элементы имели display:inline-block; (zoom: 1; для IE).

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »