Question

我想在列中显示嵌套列表，如页脚中经常使用的那样。

<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一段时间，无法让它正确显示。

Answer 1

这是一个使用“哦，太酷”显示的解决方案：内联块; 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%;

}

和使用float的解决方案： 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%;

}

Answer 2

也许：

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

Answer 3

您可能正在寻找类似下面代码的内容，但实现此目的的其他方法也很少，因为这取决于您的网页结构和最终目标

1）因为你有嵌套列表，我们只希望将宽度和浮动属性作为目标，直到我们使用'＆gt;'的第一个孩子为止登录.footer-list＆gt; li选择器。

2）你也可以为像素定义宽度或.footer-list＆gt;的百分比。李它上升了你。

3）你可能需要在父.footer-list

上清除浮动

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

希望这符合您的需求。

Answer 4

将第一个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;
        }

CSS嵌套列表到多个列

4 个答案: