弹性布局做导航

偏执的太偏执、 2022-06-09 00:54 156阅读 0赞

# 弹性布局做导航 #

#### 主要用到的属性 \{ display:flex\}和\{justify-content: space-around;\} ####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title>弹性布局</title>
        <style> *{ margin: 0; padding: 0; } ul{ width: 100%; height: 50px; list-style-type: none; display: flex;/*弹性布局*/ justify-content: space-around;/*设置内容自适应*/ background-color: cadetblue; } li{ line-height: 50px; } li:hover{ color: #fff; } </style>
    </head>
    <body>
    
    <ul id="listNav"></ul>
    
    <div class="title">弹性布局简单的使用,当数组里面的数据缺少时，布局会自动调整，让整个导航页面充满。</div>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script !src=""> $(function () { // 导航数据 var data = ['首页','新闻','国内','国际','社会','娱乐']; // 动态加载 $.each(data,function (key,val) { console.log('输出',val); $("#listNav").append('<li>'+val+'</li>'); }) }) </script>
    </body>
    </html>

### 效果图一 ###

![图片效果一][SouthEast]

### 效果图二 ###

![图片效果二][SouthEast 1]

[SouthEast]: /images/20220609/4c2b2515536749a8b8f083b3b0ad95f3.png
[SouthEast 1]: /images/20220609/57411dccdcc141df99e36e0a9b78a939.png

发表评论取消回复

表情：

评论列表（有 0 条评论，156人围观）

还没有评论，来说两句吧...

相关阅读

相关弹性布局

弹性布局(给父元素设置) 开启弹性布局 dispaly:fix; flew-direction 确定主轴的位置 row 从左往右 row-reverse 从右往

╰半橙微兮°/ 2023年05月31日 07:25/ 0 赞/ 168 阅读

相关 Flex弹性布局

简介 > Flexible Box的缩写，弹性布局，为盒模型提供最大的灵活性容器任何容器都可以指定Flex布局，设置后，子元素的float,clear,ver

╰+攻爆jí腚メ/ 2023年01月02日 15:28/ 0 赞/ 267 阅读

相关 flex弹性布局

前段时间在刷网页的时候偶然看到一个面试题，大体是这么说的，定义一个父元素和子元素，其宽高都不确定（也就是是动态变化的），如何实现子元素在父元素中上下左右居中。好家伙，我琢磨

清疚/ 2022年06月18日 08:20/ 0 赞/ 282 阅读

相关弹性布局做导航

弹性布局做导航主要用到的属性 \{ display:flex\}和\{justify-content: space-around;\} <!DOCTYPE

偏执的太偏执、/ 2022年06月09日 00:54/ 0 赞/ 157 阅读

相关 flex弹性布局

[Flex布局][Flex] [Flex 布局教程：实例篇阮一峰的网络日志][Flex _] [Flex]: https://www.cnblogs.com/drea

女爷i/ 2021年11月17日 04:06/ 0 赞/ 391 阅读

相关 flex弹性布局

以下是弹性布局的一些知识点，很简单，易懂！语法：属性：display 取值： flex：当前元素充当弹性布局的容器，并且本身以块级元素显示。 inli

绝地灬酷狼/ 2021年11月05日 16:38/ 0 赞/ 373 阅读

相关弹性布局

弹性布局在制作网页的过程中，布局是我们最重要的一个环节，可以说布局的好坏直接影响到整个网页的成败，布局成，则事半功倍，布局败，则事倍功半。随着移动互联的到来，响应式网站风

灰太狼/ 2021年11月02日 05:50/ 0 赞/ 338 阅读

相关常见布局—弹性布局

在常见的布局中，通常有一部分是固定高度，而其他部分是剩余大小分配的，这种情况我们可以使用弹性布局。说到弹性布局，就得介绍一下css属性中的弹性盒——display:flex

Myth丶恋晨/ 2021年09月18日 15:04/ 0 赞/ 406 阅读

相关 Flex弹性布局

Flex布局一、Flex布局的影响二、父盒子属性 1.display:flex 2.flex-direction

喜欢ヅ旅行/ 2021年09月07日 06:16/ 0 赞/ 510 阅读

相关 Flex弹性布局

flex容器常用属性（6个）： flex-direction（主轴方向。默认row） flex-wrap（项目在容器轴线排不下是否换行。默认nowrap）

淩亂°似流年/ 2021年08月19日 20:14/ 0 赞/ 511 阅读