会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 134093个问题
JAVA 全系列/第六阶段:JavaWeb开发/Servlet技术详解 2387楼
Python全系列/第七阶段:生产环境部署与协同开发/Linux基本命令 2388楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .box{
            width: 800px;
            height: 50px;
            background-image: linear-gradient(20deg,rgb(69, 120, 221),rgb(44, 172, 222),rgb(29, 203, 177));
            border-radius: 30px;
            margin: 0 auto;
            
        }
        
        ul{
            list-style: none;
            display: flex;    /*父元素设置为弹性容器,默认为横向排列*/
            justify-content: center;
            line-height: 50px; /*设置上下居中*/
            
        }


        ul a{
            color: rgb(173, 10, 232);
            text-decoration: none; /*去除下划线*/
            margin:0 10px;         
            font-size: 20px;
            font-weight: bolder;

        }

        a:visited{
            color: rgb(173, 10, 232);
        }

        a:hover{
            color: rgb(43, 226, 192);
        }

        a:active{
            color: hotpink;
            font-size: 26px;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li><a href="#">生活</li>
            <li><a href="#">萌宠</li>
            <li><a href="#">游戏</li>
            <li><a href="#">动漫</li>
            <li><a href="#">电视剧</li>
        </ul>
    </div>
</body>
</html>

老师我这样已经实现了内容上下左右居中对齐,并且整齐排列的导航栏效果。但是当我去掉line-height属性,将其变为盒子模型属性align-items想让他直接竖直居中对齐,结果失败了。为什么?我改过ul a{}里面的margin属性去掉了上下为0的设置,结果还是实现不了垂直方向居中。

WEB前端全系列/第一阶段:HTML5+CSS3模块/CSS盒子模型 2392楼
Python全系列/第二十阶段:数据分析-数据管理/Pandas基本使用 2393楼
JAVA 全系列/第十一阶段:百战旅游网项目/百战旅游网 2394楼

image.png

JAVA 全系列/第十一阶段:百战旅游网项目/百战旅游网 2395楼

image.png

JAVA 全系列/第十一阶段:百战旅游网项目/百战旅游网 2396楼
Python全系列/第一阶段:AI驱动的Python编程/序列 2397楼

c ,,,,,,,,cc1 c.c1c2 c.c2

屏幕截图 2024-03-17 184146.jpg

为什么,我的c1打印出来是None呢?是空的

Python全系列/第一阶段:AI驱动的Python编程/序列 2398楼
JAVA 全系列/第六阶段:JavaWeb开发/Servlet技术详解 2399楼
Python全系列/第一阶段:AI驱动的Python编程/序列 2400楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637