我对左右箭头设置了左浮动右浮动，但是没有效果

我对左右箭头设置了左浮动右浮动，但是没有效果

相关代码：

<!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">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/css.css">
    <link rel="stylesheet" href="css/base.css">
</head>
<body>
<!--顶部蓝条和白条-->
<header>
    <!--顶部蓝条-->
    <div class="top-bar">
        <div class="center-wrap">
            服务热线：400-8888-888
        </div>

    <!--慕家居导航条-->
     <nav>
         <div class="center-wrap">
             <img src="img/慕家居.png" alt="">
             <ul>
                 <li>
                     <a href="">
                         <dl>
                             <dt>
                                 <img src="img/home-gry.png" alt="">
                                 <img src="img/home-white.png" alt="">
                             </dt>
                             <dd>网站首页</dd>
                         </dl>
                     </a>
                 </li>

                 <li>
                     <a href="">
                         <dl>
                             <dt>
                                 <img src="img/abouts-gry.png" alt="">
                                 <img src="img/abouts-white.png" alt="">
                             </dt>
                             <dd>关于我们</dd>
                         </dl>
                     </a>
                 </li>

                 <li>
                     <a href="">
                         <dl>
                             <dt>
                                 <img src="img/kefu-gry.png" alt="">
                                 <img src="img/kefu-white.png" alt="">
                             </dt>
                             <dd>服务建设</dd>
                         </dl>
                     </a>
                 </li>

                 <li>
                     <a href="">
                         <dl>
                             <dt>
                                 <img src="img/chanpin-gry.png" alt="">
                                 <img src="img/chanpin-white.png" alt="">
                             </dt>
                             <dd>产品中心</dd>
                         </dl>
                     </a>
                 </li>

                 <li>
                     <a href="">
                         <dl>
                             <dt>
                                 <img src="img/fuwu-gry.png" alt="">
                                 <img src="img/fuwu-white.png" alt="">
                             </dt>
                             <dd>服务大厅</dd>
                         </dl>
                     </a>
                 </li>
             </ul>

             <div class="soso-box">
                 <input type="text" placeholder="请输入搜索内容">
                 <a href=""><img src="img/search.png" alt=""></a>
             </div>
         </div>
     </nav>   
    </div>
</header>

<!--banner-->
<section class="banner">
    <img src="img/banner01.png" alt="">
    <ol class="cur">
        <li></li>
        <li></li>
        <li></li>
    </ol>
</section>


<!--商品区域-->
<section class="goods content-part arrow">
    <div class="center-wrap">
        <!--左箭头-->
        <div class="arrow-left"></div>
        <!--右箭头-->
        <div class="arrow-right"></div>
        <!--商品-->
        <ul>
            <li>
                <dl>
                    <dt><img src="img/product01.png" alt=""></dt>
                <dd>
                    时尚卫生间墙面颜色
                    2029装饰设计</dd>
                </dl>
            </li>

            <li>
                <dl>
                    <dt><img src="img/product02.png" alt=""></dt>
                <dd>现代北欧风格厨房装
                    2029饰效果图</dd>
                </dl>
            </li>

            <li>
                <dl>
                    <dt><img src="img/product03.png" alt=""></dt>
                    <dd>现代时尚北欧风格卧
                        2029室装饰画</dd>
                </dl>
            </li>

            <li>
                <dl>
                    <dt><img src="img/product04.png" alt=""></dt>
                    <dd>现代时尚北欧风格卧
                        2029室装饰画</dd>
                </dl>
            </li>

            <li>
                <dl>
                    <dt><img src="img/product05.png" alt=""></dt>
                    <dd>现代北欧风格小客厅
                        2029装修设计</dd>
                </dl>
            </li>
        </ul>

    </div>
</section>




</body>
</html>
相关代码：
​/*定义版心的宽度和位置*/
*{
    margin: 0;
    padding: 0;
}

.center-wrap{
    width: 1200px;
    margin: 0 auto;
    font-family: '微软雅黑';
}

/*顶部区-蓝条样式*/
header .top-bar{
    font-size:18px ;
    color: #FFFFFF;
    background-color: #0058AA;
    text-align: right;
    line-height: 40px;
}

/*单独设置文本对齐*/
header .top-bar .center-wrap{
    text-align: right;
}

/*顶部区-导航条nav区域样式*/
header nav{
    height: 121px;
    /*导航区内部浮动封在这个盒子中*/
    overflow: hidden;
    background-color:whitesmoke;
    padding-bottom: 11px;
}

/*设置导航nav内部的浮动：大标题和导航选项左浮动，搜索栏右浮动*/
header nav .center-wrap img,
header nav .center-wrap ul{
    float: left;
    overflow: hidden;
    list-style: none;
    position: relative;
}
header nav .center-wrap .soso-box{
    float: right;
}

header nav .center-wrap ul li{
    float: left;
    width: 64px;
    margin-right: 61px;
    font-size: 16px;
}
/*设置导航nav内部的间距*/
header nav .center-wrap img{
    margin: 19px 110px 11px 0px;
}
header nav .center-wrap ul li a dl dt{
    width: 50px;
    height: 50px;
    margin-left: 7px;
    margin-top: 19px;
    border-radius: 50%;
    position: relative;
    margin-bottom: 20px;
}
header nav .center-wrap ul li a dl dt img{
    width: 33px;
    height: 33px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -16px;
    margin-left: -16px;
}
header nav .center-wrap ul li a dl dd{
    float: left;
    font-size: 16px;
    color: #545454;
}

header nav .center-wrap ul li:last-child{
    margin-right: 0px;
}

/*设置蓝色可缩放的圆*/
@keyframes blue-ball-frame {
    from{
        transform: scale(1);
    }
    to{
        transform: scale(1.05);
    }
}
header nav .center-wrap ul li:hover dt{
    background-color: #0058AA;
    animation: blue-ball-frame 0.4s linear 0s infinite alternate ;
}

/*灰色标签被隐藏，白色标签出现*/
/*灰色标签盖住白色标签*/
header nav .center-wrap ul li a dl dt img:first-child{
    z-index: 1000;
}
header nav .center-wrap ul li a dl dt img:nth-child(2){
    z-index: -1000;
}
/*白色标签盖住灰色标签*/
header nav .center-wrap ul li:hover dl dt img:first-child{
    z-index: -1000;
}
header nav .center-wrap ul li:hover a dl dt img:nth-child(2){
    z-index: 1000;
}

/*搜索栏样式*/
header nav .center-wrap .soso-box{
    width: 277px;
    height: 37px;
    margin: 50px 0 32px;
    overflow: hidden;
}

/*文本框左浮动，边框实心1px 按钮右浮动 两者宽度正好等于soso-box宽度*/
header nav .center-wrap .soso-box input{
    float: left;
    width: 229px;
    height: 37px;
    /*设置padding 给input里面的文字定位*/
    padding:9.5px 116px 9.5px 15px;
    box-sizing: border-box;
    margin: 0;
    border: 1px solid #D3D3D3;
}
header nav .center-wrap .soso-box a{
    float: right;
    width: 48px;
    height: 39px;
    background-color: #0058AA;
    margin: 0;
}
header nav .center-wrap .soso-box a img{
    width: 33px;
    height: 33px;
    margin: 3px 8px;
}
.banner{
    position: relative;
}
.banner img{
    width: 100%;


}
.banner ol{
    position: absolute;
    width: 50px;
    height: 10px;
    bottom: 50px;
    left: 50%;
    margin-left: -25px;
    list-style: none;
}
.banner ol li{
    float: left;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #FFFFFF;
    margin-right: 10px;
}
.banner ol li:last-child{
    margin-right: 0;
}
.banner ol li:hover{
    background-color: blue;
}


/*商品区样式*/
.goods{
    text-align: center;
    padding-top: 38px;
    padding-bottom: 32px;
    overflow: hidden;
}
.goods .center-wrap ul li{
    width: 171px;
    margin-right: 50px;
}
.goods .center-wrap ul li:last-child{
    margin-right: 0;
}
.goods .center-wrap ul li dl dt img {
    width: 171px;
    height: 176px;
}
.goods .center-wrap{
    height: 304px;
    overflow: hidden;
    position: relative;
}
.goods .center-wrap ul{
    font-size: 18px;
    color: #838383;
    width: 1055px;
    margin-left: -527.5px;
}
.goods .center-wrap ul li dt{
    margin-bottom: 10px;
}

/*左右箭头设置*/
.goods .center-wrap .arrow-left{
    position: absolute;
    width: 48px;
    height: 48px;
    float: left;
    background: url("../img/prev.png") no-repeat;
    top: 33%;
}
.goods .center-wrap .arrow-left:hover{
    background: url("../img/prev_active.png") no-repeat;
}
.goods .center-wrap .arrow-right{
    position: absolute;
    width: 48px;
    height: 48px;
    float: right;
    background: url("../img/next.png") no-repeat;
    top: 33%;
}
.goods .center-wrap .arrow-right:hover{
    background: url("../img/next_active.png") no-repeat;
}
​相关代码：
​.arrow .center-wrap ul li{
    float: left;
    overflow: hidden;
}

/*给中间的ul定位*/
.arrow .center-wrap{
    position: relative;
}
.arrow .center-wrap ul{
    position: absolute;
    left: 50%;
}
请你摘掉伪善的面具 2021-05-28
源自：“仿穷游”首页静态项目   5-2 项目作业
12
收起

正在回答

登陆购买课程后可参与讨论，去登陆吧

1回答
好帮手慕慕子 回答被采纳获得+3积分 2021-05-28 10:31:10

同学你好，因为左右箭头设置了绝对定位，如下：

http://img1.sycdn.imooc.com//climg/60b05576092f514f07720558.jpg

此时设置浮动属性无效，所以无法实现效果。

建议：去掉float属性，通过left和right属性调整左右箭头的位置，如下：

http://img1.sycdn.imooc.com//climg/60b055b00959fbfc07540598.jpg

此时左右箭头的位置就是对的了，如下：

​http://img1.sycdn.imooc.com//climg/60b055da09e4911815010287.jpg

同学可以接着书写代码，完成作业效果了。

祝学习愉快~

0
收起回答
  • 请你摘掉伪善的面具 提问者 #1

    懂了，谢谢老师，我以为自己的提问没发出去，结果发了两次，不好意思


    2021-05-28 11:56:01
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

设置右浮动，又清除右浮动，不应该回到原位置吗？
10 0 5
请问，处理设置图片向左浮动，为什么不能设置文字向右浮动？
6 0 5
元素本来在容器内居左的，为什么加了右浮动，再清除右浮动，元素并没有回到原始位置？
0 1 5
清除浮动指清除哪里的浮动
2 1 6
关于清除浮动左右设置的问题
5 0 3

登录后可查看更多问答，登录/注册

前端工程师2020
  • 参与学习           人
  • 提交作业       7880    份
  • 解答问题       15282    个

前端技术快速更迭，人才紧缺。带你从0基础开始，成为Web全栈工程师，转行就业更顺畅。

了解课程

本课精华内容

问答 作业

老师，我在xhr.send()出错了

93 2

老师好，这里虽然老师给了方法，但我想问问关于定位后的宽高

44 2

函数里面的参数是函数,那么里面作为参数的函数是如何调用的?

74 4

老师请检查

30 1

老师，关于ctx.set()我存在困惑

32 1

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师