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>必须包含在<li>中。假设您不会嵌套多个<ul>，这可以通过制作除最内层<ul>之外的所有<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>

fiddle来测试它。

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时，它的列表就会出现。

在李里面漂浮李

4 个答案: