将多个列的CSS嵌套列表

我想在列页中显示嵌套列表，就像在页脚中经常使用的一样。将多个列的CSS嵌套列表

<ul> 
    <li> 
     Header 1 
     <ul> 
      <li>Item 1</li> 
      <li>Item 2</li> 
     </ul> 
    </li> 
    <li> 
     Header 2 
     <ul> 
      <li>Item 1.2</li> 
      <li>Item 2.2</li> 
     </ul> 
    </li> 
</ul>

而且我想结果看起来像：

Header 1   Header 2 
Item 1   Item 1.2 
Item 2   Item 2.2

我一直在玩display:inline和display:block了一段时间，不能让它正确地显示出来。

来源

2013-10-10 SaltyNuts

可能：

<ul> 
    <li style="float:left;"> 
     Header 1 
     <ul> 
      <li>Item 1</li> 
      <li>Item 2</li> 
     </ul> 
    </li> 
    <li style="float:left;"> 
     Header 2 
     <ul> 
      <li>Item 1.2</li> 
      <li>Item 2.2</li> 
     </ul> 
    </li> 
</ul>

来源

2013-10-10 18:42:31 Micah

选择这一个为正确的元件的最简洁的例子来使用。 – SaltyNuts

你可能会寻找类似下面的代码，但也有一些其他的方式也实现这一点，因为这取决于你的页面结构和最终目标

1）因为你有嵌套列表，我们只想定位宽度和浮点属性，直到第一个孩子用'>'登录.footer-list> li选择器。

2）你也可以为像素或百分比定义.footer-list> li的宽度。它提升你。

3），你可能需要清除浮动父.footer名单上

<!DOCTYPE html> 
<html> 
<head> 
<title> New Document </title> 
<style type="text/css"> 

    *{ 
    padding:0; 
    margin:0 
    } 

    ul li{ 
    list-style:none; 
    } 
    .footer-list{ 
    padding:10px; 
    } 
    .footer-list > li{ 
    /*width:300px;*/ /* you may un comment this line and comment below line width in %*/ 

    width:20%; 
    float:left; 
    } 


</style> 
</head> 

<body> 
<ul class="footer-list"> 
    <li> 
     Header 1 
     <ul> 
      <li>Item 1</li> 
      <li>Item 2</li> 
     </ul> 
    </li> 
    <li> 
     Header 2 
     <ul> 
      <li>Item 1.2</li> 
      <li>Item 2.2</li> 
     </ul> 
    </li> 
</ul> 

</body> 
</html>

希望这符合您的需求。

来源

2013-10-10 18:45:29

给第一UL标记的类 “myul”

<ul class="myul"> 
    <li> 
     Header 1 ...

，并使用这个CSS代码：

 ul.myul{ 
      list-style: none; 
     } 
     ul.myul>li{ 
      float:left; 
      padding-right: 30px; 
     } 
     ul.myul ul{ 
      list-style: none; 
      padding: 0; 
      margin: 0; 
     }

来源

2013-10-10 18:48:10 Silvanu

下面是一个使用了 “哦，太酷了” 的显示解决方案：内嵌-块; http://jsfiddle.net/b9MWz/4/

ul{ 
    padding: 0; 
    list-style: none; /*remove bullets*/ 
} 

ul li{  
    display: inline-block; 
    width: 20%; /*or whatever unit*/ 

} 

ul li ul, ul li ul li{ 
    display: static; 
    width: 100%; 

}

和使用浮子的溶液： http://jsfiddle.net/8F8Uy/3/

ul{ 
    padding: 0; 
    list-style: none; /*remove bullets*/ 
} 

ul li{  
    float: left; 
    width: 20%; /*or whatever unit*/ 

} 

ul li ul, ul li ul li{ 
    float: none; /* un-"float" */ 
    width: 100%; 

}

来源

2013-10-10 18:51:39 80PoundsOfFury

将多个列的CSS嵌套列表

回答

相关问题