CSS练习题——4.利用flex做一个弹性菜单栏

浅端

于 2019-10-23 20:40:43 发布

阅读量283

点赞数

分类专栏： CSS3练习题文章标签： css

本文链接：https://blog.csdn.net/qq_40686529/article/details/102710499

版权

CSS3练习题专栏收录该内容

7 篇文章 1 订阅

订阅专栏

1.需求

2.代码

1.需求：

在项目中，菜单栏选项经常是从后台传过来的，所以不知道有几项菜单，这就要求菜单栏选项可伸缩，利用flex可以很好的解决这个问题。如果删除了两项，那么菜单将会弹性自扩展。

2.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单项</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 300px;
            border: 1px solid #000;
            margin: 100px auto;
        }
        ul{
            width: 100%;
            list-style: none;
            //  让ul可扩展  
            display: flex;
        }
        ul>li{
            height:26px;
            background: green;
            //  每个li占父元素的1/n(n取决于有多少个兄弟)
            flex:1;
            border-right:1px solid #000;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>苹果</li>
            <li>香蕉</li>
            <li>橘子</li>
            <li>西瓜</li>
        </ul>
    </div>
</body>
</html>

浅端

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS练习题——4.利用flex做一个弹性菜单栏

目录1.需求2.代码1.需求：在项目中，菜单栏选项经常是从后台传过来的，所以不知道有几项菜单，这就要求菜单栏选项可伸缩，利用flex可以很好的解决这个问题。如果删除了两项，那么菜单将会弹性自扩展。2.代码<!DOCTYPE html><html lang="en"><head> <meta charset="U...
复制链接

扫一扫

专栏目录