html5菜单制作和浮动

时间：2021-11-12 20:32:12
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>菜单制作和浮动</title>
        <style> a{ text-decoration: none; } li{ list-style-type: none; /*display: inline-block;*/ float: left; margin-right:40px; } li span{ margin-left: 54px; } ul{ height: 30px; line-height: 20px; } .clearfloat{ clear: both; } </style>
    </head>
    <body>
        <ul>
            <li>
                <a herf="#">菜单1</a>
                <span>|</span>
            </li>
            <li>
                <a herf="#">菜单2</a>
                <span>|</span>
            </li><li>
                <a herf="#">菜单3</a>
                <span>|</span>
            </li><li>
                <a herf="#">菜单4</a>
                <span>|</span>
            </li>
            <!--清除浮动，若未清除浮动，div中的内容会跟随在菜单列表的后面-->
            <div class="clearfloat"></div>
            <div>5843964</div>
        </ul>
    </body>
</html>
标签：

相关文章