Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Горизонтальный scroll

Автор: BloodWizard 5.8.2011, 08:35

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

Код


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

Автор: mcTep 5.8.2011, 10:06

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

Код


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