<ul> within another <ul> inherits style_问答_开发者

开发者 https://www.devze.com 2023-02-04 13:52 出处：网络

I have the following structure in some HTML: <ul class=\"li_inline\"> <li> <ul class=\"li_block\">

I have the following structure in some 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>

With the CSS like this:

.li_inline li
{
    display: inline;
}

.li_block li
{
    display: block;
}

What I would like to happen is to have the two inner <ul>s side by side, but any <li>s inside them to be below each other. This is so I can get a sidebar and main body side by side, but elements inside them behave normally (ie. one below the other).

Can someone suggest some CSS I can use so that the inner (li_block) lists' <li> elements are displayed as block elements, but the <ul>s themselves are displayed side by side?

Thanks,

James

Use a reset rule.

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

In your case using the !important can get your job done. But try not to use it

UPDATE

Solution: http://jsfiddle.net/Starx/KHjmP/ (FF3+, Safari 4+, IE8+)

it ain't pretty but you get the jist of it :)

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

This worked for me:

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

You should be able to do something as simple as the following. I tested it in Firefox, Chrome and IE7.

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

http://jsfiddle.net/fzBnG/

.li_inline li {
    display: inline-block;
    float: left;
}

.li_block li {
    display: block;
    clear:both; 
}

First, thanks for everyone's help! I'm really sorry to look like I'm ignoring your hard efforts away, but I have taken note of all your answers, and they're all very handy.

The solution I have come up with is to simply use display: inline-block for both inner uls, with the outer one left default.

Once again, thanks for your help everyone.

James