CSS中控制列表排列方式

作者:shenmeng 发布时间:November 13, 2009 分类:

列表默认是纵向排列的,但是可以通过在css中设置ul的clear属性和li的float属性来使列表横向排列。如果需要在内嵌的ul中再次实现列表竖排(实现下拉菜单需要),则只需设置内嵌li的属性为flaot:both;
如下代码就实现外层列表的横向排列和内层列表的纵向排列:

<head>
    <title>列表排列方式</title>
    <style type="text/css">
        ul.test{
            clear: both;
            list-style: none;
        }
        ul.test li{
            float:left;
            margin:5px;
        }
        ul.test ul{
            list-style:none;

        }
        ul.test ul li{
            clear: both;
        }
    </style>
</head>
<body>
    <ul class="test">
        <li>test1</li>
        <li>test2</li>
        <li>
            <ul>
                <li>inner1</li>
                <li>inner2</li>
            </ul>
        </li>
    </ul>
</body>

标签: none

添加新评论 »

captcha
请输入验证码