ul li写导航条

老男人，

于 2021-09-17 20:05:27 发布

阅读量253

点赞数 1

文章标签： css html html5

本文链接：https://blog.csdn.net/qq_45889379/article/details/120355234

版权

一float:left

<body>
    <ul>
        <li>新闻</li>
        <li>视频</li>
        <li>图片</li>
        <li>军事</li>
        <li>NBA</li>
        <li>体育</li>
        <li>新闻</li>
        <li>视频</li>
        <li>图片</li>
        <li>军事</li>
        <li>NBA</li>
        <li>体育</li>
    </ul>
</body>

    <style>
        *{
            padding: 0;
            margin: 0;
        } 
        ul{
            overflow: hidden;//清除浮动
            width: 1230px;
            background-color: #0087CC;
            margin: 10px auto;
            padding-left: 20px;
            border-radius: 6px;
            color: white;
        }
        li{
            float: left;
            list-style: none;
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            cursor: pointer;
        }
        li:hover{
            background-color: #02B2FF;
        }
    </style>

二display:inline-block

    <style>
        *{
            padding: 0;
            margin: 0;
        } 
        ul{
            width: 1218px;
            background-color: #0087CC;
            margin: 10px auto;
            padding: 0px 30px;
            border-radius: 6px;
            color: white;
        }
        li{
            display: inline-block;
            list-style: none;
            width: 97px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            cursor: pointer;
        }
        li:hover{
            background-color: #02B2FF;
        }
    </style>

老男人，

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ul li写导航条

一float:left<body> <ul> <li>新闻</li> <li>视频</li> <li>图片</li> <li>军事</li> <li>NBA</li> <li>体育</li> <li>新闻&l
复制链接

扫一扫