Question

考虑以下HTML结构：

<div id="footer">
                <div id="content">
                    <ul>
                        <li>
                            <ul>
                                <li>AAA</li>
                                <li>AAA</li>
                                <li>AAA</li>

                            </ul>
                        </li>
                        <li>
                            <ul>
                                <li>BBB</li>
                                <li>BBB</li>
                                <li>BBB</li>
                            </ul>
                        </li>
                    </ul>
                </div>
    </div>

接下来，我应用以下CSS：

#content ul {
    list-style: none;
}

#content ul li{
    display: inline;
}

输出为：AAA AAA AAA BBB BBB BBB 所需的输出是：

AAA BBB 

AAA BBB 

AAA BBB

非常感谢任何帮助。

Answer 1

AAA 和 BBB 似乎表示表格数据。为什么不使用桌子？

<table>
    <tr>
        <td>
            AAA
        </td>
        <td>
            BBB
        </td>
    </tr>
    <tr>
        <td>
            AAA
        </td>
        <td>
            BBB
        </td>
    </tr>
</table>

表仍然在Web开发中占有一席之地。 They are not inherently evil

Answer 2

你可以试试这个

#content > ul > li {
    display: inline;
}

这样，只有第一个<li>元素才会收到规则。

修改

您可能希望使用float:left来获得结果，如this fiddle所示。

Answer 3

#content ul{float:left; list-style:none;}
#content>ul li{float:left;} /*Only target fist-level li*/
#content li>ul>li{clear:both;}

这将显示您在不使用表格的情况下尝试实现的目标。

Answer 4

你可以将两个列表一个接一个地浮动。

#content ul { list-style:none; }
#content > ul > li { float:left; margin-right:1em; }

http://jsfiddle.net/geertdd/Cu49F/1/

Answer 5

您可以通过删除#content ul li{display: inline;}并添加以下规则来实现此目的。实例：http://jsfiddle.net/tw16/5E7Ac/

#content ul li ul{
    float: left;
}

Answer 6

订购内容的方式不同于它在源中的显示方式，这是一个巨大的痛苦。对于AAA和BBB元素交替的表或定义列表，您可能会更好。如果这不是一个选项，你可以使用两个固定宽度ul块浮动到左边，块li元素 - 取决于你的设计要求（例如，宽度变化多少？如果元素垂直排列？）

Answer 7

您是否尝试将#content ul li更改为#content ul ul li，这可以解决问题。

显示内联问题

7 个答案: