浮动李李里面

我在使用代码编辑器的麻烦所以这里

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

而且我想浮动元素来得到这样一个结果：

是这个标记有可能吗？

来源

2013-03-28 user1872795

你必须将内部'ul'嵌套到父'li'中 – Ragnarokkr

动态示例：http://jsfiddle.net/KdLMa/ – dfsq

你可以做这样的事情

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进行测试。

来源

2013-03-28 19:31:59 Ragnarokkr

需要添加vertical-align：top;为了让他们全部对齐正确。 – Michael

已更新。谢谢@迈克尔，我已经忘记了:) – Ragnarokkr

谢谢大家。我发现了一个工作区，但我尝试了内联区块建议。 – user1872795

您的HTML无效，因为<ul>必须包含在<li> s中。假设你将不能嵌套多个<ul>，这可以通过使所有的<ul>和<li>display: inline-block，除了最内层的<li>小号

http://jsfiddle.net/zeVwg/

来源

2013-03-28 19:32:05

我看过这个链接，我不明白为什么它不适合我。我会检查其余的CSS，以防万一出现问题。 – user1872795

已解决。由于声誉而无法回答我的问题。谢谢大家。 – user1872795

首先，您需要调整您的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>

来源

2013-03-28 19:32:11 Michael

我发现了一种改变标记的方法。我在一秒之内发布它。谢谢你的答案。 – user1872795

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

我已经做了所有的导航它在当我们将鼠标悬停在李其名单将出现。

来源

2013-03-28 23:07:17 Hassaan

浮动李李里面

回答

相关问题