2

我在一些 HTML 中有以下结构：

<ul class="li_inline">
    <li>
        <ul class="li_block">
            <li>东西</li>
            <li>东西下的东西</li>
        </ul>
    </li>
    <li>
        <ul class="li_block">
            <li>东西</li>
            <li>东西下的东西</li>
        </ul>
    </li>
</ul>

使用这样的 CSS：

.li_inline li
{
    显示：内联；
}

.li_block 李
{
    显示：块；
}

我想要发生的是让两个内部<ul>s 并排，但<li>它们内部的任何 s 都在彼此下方。这样我就可以并排获得侧边栏和主体，但其中的元素表现正常（即一个在另一个下方）。

有人可以建议一些我可以使用的 CSS，以便内部 ( li_block) 列表的<li>元素显示为块元素，但<ul>s 本身并排显示？

谢谢，

詹姆士

4

6 回答 6

2

使用重置规则。

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

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

更新

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

于 2011-01-14T13:13:09.323 回答
1

它不漂亮，但你明白了：）

<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>
于 2011-01-14T13:14:35.430 回答
0

这对我有用：

<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>
于 2011-01-14T13:17:02.033 回答
0 
.li_inline li {
    display: inline-block;
    float: left;
}

.li_block li {
    display: block;
    clear:both; 
}
于 2011-01-14T13:22:21.220 回答
0

您应该能够执行以下简单的操作。我在 Firefox、Chrome 和 IE7 中对其进行了测试。

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

http://jsfiddle.net/fzBnG/

于 2011-01-14T13:22:35.387 回答
0

首先感谢大家的帮助！我真的很抱歉看起来我忽略了你的辛勤努力，但我已经记下了你所有的答案，而且它们都非常方便。

我想出的解决方案是简单地使用display: inline-block两个内部uls，外部一个左默认。

再次感谢大家的帮助。

詹姆士

于 2011-01-18T18:11:22.107 回答