<ul> внутри другого <ul>наследует стиль - PullRequest
Новая
       15

<ul> внутри другого <ul>наследует стиль

1 голос
/ 14 января 2011

У меня есть следующая структура в некотором HTML: 

<ul class="li_inline">
    <li>
        <ul class="li_block">
            <li>Stuff</li>
            <li>Stuff under stuff</li>
        </ul>
    </li>
    <li>
        <ul class="li_block">
            <li>Stuff</li>
            <li>Stuff under stuff</li>
        </ul>
    </li>
</ul>

С помощью CSS, как это: 

.li_inline li
{
    display: inline;
}

.li_block li
{
    display: block;
}

Я бы хотел, чтобы два внутренних элемента <ul> располагались рядом, а любые <li> внутри были бы ниже друг друга. Это так, что я могу получить боковую панель и основной корпус бок о бок, но элементы внутри них ведут себя нормально (т.е. один под другим).

Может кто-нибудь предложить какой-нибудь CSS, который я могу использовать, чтобы внутренние (li_block) списки '1011 * списков отображались как блочные элементы, а сами <ul> отображались рядом?

Спасибо

Джеймс

Ответы [ 6 ]

2 голосов
/ 14 января 2011

Использовать правило сброса. 

ul ul { list-style:none; padding: 5px 20px; margin: 5px 10px; }

В вашем случае с помощью !important вы можете выполнить свою работу. Но старайтесь не использовать его

UPDATE

Решение: http://jsfiddle.net/Starx/KHjmP/ (FF3 +, Safari 4+, IE8 +)

1 голос
/ 14 января 2011

это не красиво, но вы понимаете, с чем это связано:) 

<div style="overflow: hidden;">
        <ul class="li_block" style="float: left;">
            <li>Stuff</li>
            <li>Stuff under stuff</li>
        </ul>
        <ul class="li_block" style="float: left;">
            <li>Stuff</li>
            <li>Stuff under stuff</li>
        </ul>
</div>
0 голосов
/ 18 января 2011

Во-первых, спасибо всем за помощь! Мне очень жаль выглядеть так, будто я игнорирую ваши упорные усилия, но я записал все ваши ответы, и все они очень удобны.

Решение, которое я нашел, состоит в том, чтобы просто использовать display: inline-block для обоих внутренних ul с, с внешним по умолчанию слева.

Еще раз, спасибо за вашу помощь всем.

Джеймс

0 голосов
/ 14 января 2011

Вы должны быть в состоянии сделать что-то столь же простое как следующее.Я тестировал его в Firefox, Chrome и IE7. 

.li_inline > li {
    display: inline;
}
.li_inline > li > ul  {
    float: left;
}

http://jsfiddle.net/fzBnG/

0 голосов
/ 14 января 2011 
.li_inline li {
    display: inline-block;
    float: left;
}

.li_block li {
    display: block;
    clear:both; 
}
0 голосов
/ 14 января 2011

Это сработало для меня: 

<html>
    <head>
        <style type="text/css">
        ul.outer{}

        ul.outer > li{
            float: left;
        }

        ul.outer > li > ul > li{
            display: block;
        }

        </style>
    </head>
    <body>
        <ul class="outer">
            <li>
                <ul>
                    <li>1.1</li>
                    <li>1.2</li>
                </ul>
            </li>
            <li>
                <ul>
                    <li>2.1</li>
                    <li>2.2</li>
                </ul>
            </li>
        </ul>
    </body>
</html>
...