html - 在 LI 中浮动 LI

Question

我在使用代码编辑器时遇到问题，所以在这里

<ul>
    <li>Item1</li>
    <ul>
        <li>Item 1.1</li>
        <li>Item 1.2</li>
    </ul>
    <li>Item2</li>
    <ul>
        <li>Item 2.1</li>
        <li>Item 2.2</li>
    </ul>
</ul>

我想浮动元素以获得这样的结果：

这个标记有可能吗？

Answer 1

您的 HTML 无效，因为内部<ul>s 必须包含在<li>s 中。假设您不会嵌套多个s <ul>，这可以通过制作除最内层之外的所有<ul>and来实现<li> display: inline-block<li>

http://jsfiddle.net/zeVwg/

Answer 2

你可以做这样的事情

CSS

ul li { 
    display: inline;
    vertical-align: top;
}
li > ul { display: inline-block; }
li > ul li { display: block; }

HTML

<ul>
    <li>Item1
        <ul>
            <li>Item 1.1</li>
            <li>Item 1.2</li>
        </ul>
    </li>
    <li>Item2
        <ul>
            <li>Item 2.1</li>
            <li>Item 2.2</li>
        </ul>
    </li>
</ul>

测试它的小提琴。

Answer 3

首先，您需要像这样调整 HTML：

<ul>
    <li>Item1
        <ul>
            <li>Item 1.1</li>
            <li>Item 1.2</li>
        </ul>
    </li>


    <li>Item1
        <ul>
            <li>Item 1.1</li>
            <li>Item 1.2</li>
        </ul>
    </li>
</ul>

Answer 4

HTML：

<ul>
    <li>Item1
        <ul>
            <li>Item 1.1</li>
            <li>Item 1.2</li>
        </ul>
    </li>
    <li>Item2
        <ul>
            <li>Item 2.1</li>
            <li>Item 2.2</li>
        </ul>
    </li>
</ul>

CSS：

ul li { float:left; position:relative; margin-left:10px; list-style:none; width:120px;}
ul li:first-child{ margin:0px;}

ul ul { position:absolute; left:0; top:0; display:none; width:100px; z-index:10;}

ul li:hover ul{ display:block;}

ul ul li{ float:none; margin-left:0px; margin-top:5px; width:100px;}
ul ul li:first-child{ margin-top:0px;}

我已经做了一个导航，当我们将 li 悬停在其中时，它的列表就会出现。