html5菜单制作和浮动

最新推荐文章于 2021-06-23 07:22:04 发布

想要成为大佬的小萌新

最新推荐文章于 2021-06-23 07:22:04 发布

阅读量3.7k

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/taotaoaiqinqin/article/details/80339465

版权

HTML5 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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