会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132370个问题

<div class="white-nav">

        <div class="wrap">

            <div class="logo">

                <img src="./images/mi-home.png" alt="" class="mi-home">

                <img src="./images/mi-logo.png" alt="" class="mi-logo">

            </div>

            <div class="nav-bar">

                <ul>

                    <li><a href="#"><img src="./images/zzxsh.gif" alt=""></a></li>

                    <li>

                        <a href="#">小米手机</a>

                        <div class="nav-bar-list">

                            <div class="wrap">

                                <ul>

                                    <li>

                                        <a href="#">

                                            <div class="img-box">

                                                <img src="./images/phone.png" alt="">

                                            </div>

                                            <p class="name">小米10至尊纪念版</p>

                                            <p class="price">5200元</p>

                                        </a>

                                    </li>

                                    <li>

                                        <a href="#">

                                            <div class="img-box">

                                                <img src="./images/phone.png" alt="">

                                            </div>

                                            <p class="name">小米10至尊纪念版</p>

                                            <p class="price">5200元</p>

                                        </a>

                                    </li>

                                    <li>

                                        <a href="#">

                                            <div class="img-box">

                                                <img src="./images/phone.png" alt="">

                                            </div>

                                            <p class="name">小米10至尊纪念版</p>

                                            <p class="price">5200元</p>

                                        </a>

                                    </li>

                                    <li>

                                        <a href="#">

                                            <div class="img-box">

                                                <img src="./images/phone.png" alt="">

                                            </div>

                                            <p class="name">小米10至尊纪念版</p>

                                            <p class="price">5200元</p>

                                        </a>

                                    </li>

                                </ul>

                            </div>

                        </div>

                    </li>

                    <li><a href="#">电视</a></li>

                    <li><a href="#">笔记本</a></li>

                    <li><a href="#">家电</a></li>

                    <li><a href="#">路由器</a></li>

                    <li><a href="#">智能硬件</a></li>

                    <li><a href="#">服务</a></li>

                    <li><a href="#">社区</a></li>

                </ul>

            </div>

            <div class="search">

                <input type="text" placeholder="元宇宙">

                <button class="iconfont"></button>

            </div>

        </div>

    </div>

    <!-- 白色导航结束 -->


/* 白色导航样式开始 */

.white-nav{

    width: 100%;

    height: 100px;

    background: #fff;

    position: relative;

}

.logo{

    width: 55px;

    height: 55px;

    background: #ff6700;

    float: left;

    margin-top: 22.5px;

    overflow: hidden;

    position: relative;

}

.logo>img{

    width: 100%;

    height: 100%;

    position:absolute;

    top: 0;

    transition: all 0.2s;

}

.mi-home{

    left: -55px;

}

.mi-logo{

    left: 0;

}

.logo:hover>.mi-home{

    left: 0;

}

.logo:hover>.mi-logo{

    left: 55px;

}

.nav-bar{

    width: 875px;

    height: 100px;

    line-height: 100px;

    float: left;

}

.search{

    width: 296px;

    height: 100px;

    float: right;

}

.nav-bar li{

    float: left;

}

.nav-bar>ul>li>a{

    color: #333;

    padding: 0 10px;

}


.nav-bar>ul>li>a:hover{

    color: #ff6700;

}


.nav-bar>ul>li:first-child img{

    margin-top: 22.5px;

}


.search input{

    width: 244px;

    height: 50px;

    border:1px solid #e0e0e0;

    margin-top: 25px;

    /* 去掉选中的边框 */

    outline: none;

    padding: 0 10px;

    box-sizing: border-box;

    border-right: 0;

}


.search button{

    width: 52px;

    height: 50px;

    background: #fff;

    border:1px solid #e0e0e0;

    float: right;

    margin-top: 25px;

}

.search button:hover{

    background: #ff6700;

    color: #fff;

}


.nav-bar-list{

    width: 100%;

    height: 229px;

    background: #fff;

    border-top: 1px solid #eee;

    box-shadow: 0 3px 4px rgba(0,0,0,0.1);

    position: absolute;

    left: 0;

    top: 100px;

    display: none;

}

老师你好,问题在小米手机悬浮出来的宽度,这里nav-bar-list宽度设置为100%,然后宽度必然为父盒子宽度,它的父盒子为li,它的父盒子li与其他几个li共同构成nav-bar,为啥nav-bar-list显示出来的宽度不是一个li的宽度而是比li宽得多,好像是nav-bar宽度了

image.png





WEB前端全系列/第一阶段:HTML5+CSS3模块/商城官网项目 2971楼
JAVA 全系列/预科阶段:职业规划/学习方法/程序员的基本素养和职业规划 2973楼
JAVA 全系列/第六阶段:项目管理与SSM框架/SpringMVC 2975楼
JAVA 全系列/第一阶段:JAVA 快速入门/飞机大战小项目训练 2980楼
JAVA 全系列/第二阶段:JAVA 基础深化和提高/网络编程(旧) 2981楼
JAVA 全系列/第三阶段:数据库编程/Oracle 数据库的使用 2982楼
Python 全系列/第九阶段:Python_Django2 框架(隐藏)/Django 入门 2983楼
C++特训班/第一阶段:基础篇/基础篇 2985楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

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