Как сделать двухуровневый ul li в строку?

Question

[Secret73]

<ul class="ul-dropfree ul-treefree">
    <li>
        <p>1</p>
        <ul>
            <li>
                <p>1.1</p>
            </li>
            <li>
                <p>1.2</li>
            <li>
                <p>1.3</p>
                <ul>
                    <li>
                        <p>1.1.1</p>
                    </li>
                    <li>
                        <p>1.1.2</p>
                    </li>
                </ul>
            </li>
            <li>
                <p>1.4</p>
            </li>
        </ul>
    </li>
    <li>
        <p>2</p>
        <ul>
            <li>
                <p>2.1</p>
            </li>
            <li>
                <p>2.2</p>
                <ul>
                    <li>
                        <p>2.2.1</p>
                    </li>
                    <li>
                        <p>2.2.2</p>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

ul.ul-treefree {
padding-left:25px;
padding-top: 10px;
}
ul.ul-treefree ul {
margin:0;
padding-left:6px;
}
ul.ul-treefree li {
position:relative;
list-style:none outside none;
margin:0;
padding:0 0 0 19px;
line-height:23px;
display: inline;
}

ul.ul-treefree li:last-child {
border-left:0 none;
}

ul.ul-dropfree div.drop {
width:11px;
height:12px;
position:absolute;
z-index:10;
top:9px;
left:-12px;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAALCAIAAAD0nuopAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUeNpinDlzJgNlgAWI09LScEnPmjWLoAImrHpIAkwMFAMqGMGC6X44GzkIsHoQooAFTTVQKdbAwxOigyMsmIh3MC7ASHnqBAgwAD4CGeOiDhXRAAAAAElFTkSuQmCC');

background-position:-11px 0;
background-repeat:no-repeat;
cursor:pointer;
}

$(document).ready(function() {
    var treeState = { // объект, который хранит состояния веток
        state: JSON.parse(localStorage.getItem('branchOpened')) || {},
        setOpened: function(element) {
            this.state[this._getKey(element)] = true;
            this._save();
        },
        setClosed: function(element) {
            delete this.state[this._getKey(element)];
            this._save();
        },
        isClosed: function(element) {
            return !this.state[this._getKey(element)];
        },
        _save: function() {
            localStorage.setItem('branchOpened', JSON.stringify(this.state));
        },
        _getKey: function(element) {
            var ixs = [];
            $(element).parentsUntil('ul-dropfree', 'li')
                .each(function(ix, item) {
                    ixs.unshift($(item).index());
                });
            return ixs.join(',');
        }
    };
    $('.ul-dropfree').find('li:has(ul:has(li))').prepend('<div class="drop"></div>');
    $('.ul-dropfree div.drop').click(function() {
        var branch = $(this).nextAll('ul').first();
        if (branch.css('display') == 'none') {
            branch.slideDown(400);
            $(this).css({'background-position': '-11px 0px'});
            // сохраняем состояние ветви
            treeState.setOpened(branch);
        }
        else {
            branch.slideUp(400);
            $(this).css({'background-position': '0 0'});
            // сохраняем состояние ветви
            treeState.setClosed(branch);
        }
    });
    // эту часть немного переделал, чтобы скрывать только нужные ветви
    $('.ul-dropfree ul').each(function(ix, branch) {
        if (treeState.isClosed(branch)) {
            $(branch).slideUp(400)
                .prevAll('div.drop')
            	.css({'background-position': '0 0'});
        }
    });
});

Ссылка
jsfiddle.net/0dev/e62aa4e5

Помогите привести вот к такому виду, спасибо.

Answer 1

[Павел]

Добавить:

ul.ul-treefree > li {width:15%;
float:left;}

После аналогично для подуровней
ul.ul-treefree > ul > li

Comments

[Secret73]

Спасибо большое, помогло. Скажите, а как можно выпадающий список поделить на 2 столбца?

[Павел]

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

ul.ul-treefree li ul li:nth-child(3) {margin-left:30px;}
ul.ul-treefree li ul li ul {margin-left:15px;}

[Secret73]

PavelMonro: Спасибо, сделал чуть по другому. Выпадающему списку li задал новый класс и указал ширину
ul ul.ul-treefree ul {margin:0;padding-left:6px;width: 800px;}
li.node_two { float: left;width: 25%;margin: 0 0 0 39px;}

[Secret73]

PavelMonro: Но встал другой вопрос, как сместить выпадающее меню всегда к левому краю, у второго пункта

[Павел]

Secret73: text-align:left; но без примера непонятно

[Secret73]

PavelMonro: