1

我想在列中显示嵌套列表，这在页脚中经常使用。

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

4

4 回答 4

3

这是一个使用“哦，太酷了”显示的解决方案： inline-block; 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-10T18:51:39.620 回答
1

也许：

<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-10T18:42:31.457 回答
0

给第一个 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-10T18:48:10.923 回答
0

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

1）由于您有嵌套列表，并且我们只想将宽度和浮动属性作为目标，直到我们使用 '>' 登录 .footer-list > li 选择器的第一个孩子。

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

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>

希望这符合您的需要。

于 2013-10-10T18:45:29.823 回答