Question

我在某些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）列表'<li>元素显示为块元素，但<ul> s本身并排显示？

谢谢，

詹姆斯

Answer 1

使用重置规则。

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

在您使用!important的情况下可以完成工作。但尽量不要使用它

更新

解决方案：http://jsfiddle.net/Starx/KHjmP/（FF3 +，Safari 4 +，IE8 +）

Answer 2

它不漂亮，但你得到它的主旨：）

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

Answer 3

这对我有用：

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

Answer 4

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

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

Answer 5

您应该可以执行以下简单操作。我在Firefox，Chrome和IE7中测试过它。

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

http://jsfiddle.net/fzBnG/

Answer 6

首先，感谢大家的帮助！我很遗憾看起来我忽略了你的努力，但我已经注意到你所有的答案，而且它们都非常方便。

我提出的解决方案是简单地将display: inline-block用于内部ul，其中外部默认为。{/ p>

再次感谢大家的帮助。

詹姆斯

另一个<ul>中的<ul>继承样式</ul> </ul>

6 个答案:

更新