老师麻烦看下,整体左右未居中

老师麻烦看下,整体左右未居中

<!DOCTYPE html>

<html>

<head>

    <style type="text/css">

        *{margin:0;padding:0;}

        a{text-decoration:none;}

        .cons{width:800px;border:1px #ececec dashed;overflow:hidden;padding:10px;}

        .cons .cont{border:1px #ececec solid;float:left;margin:10px;}

        

        .cons .cont p a{font-size:14px;color:black;}

        .cons .cont p a:hover{color:blue;}

    </style>    <!-- 此处编写样式 -->

</head>

<body>   

    <div class="cons">

        <div class="cont">

            <img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">

            <p><a href="#">欢迎回到慕课网学习新知识</a></p>

        </div>

        <div class="cont">

            <img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg">

            <p><a href="#">欢迎回到慕课网学习新知识</a></p>

        </div>

        <div class="cont">

            <img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg">

            <p><a href="#">欢迎回到慕课网学习新知识</a></p>

        </div>

        <div class="cont">

            <img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">

            <p><a href="#">欢迎回到慕课网学习新知识</a></p>

        </div>

        <div class="cont">

            <img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg">

            <p><a href="#">欢迎回到慕课网学习新知识</a></p>

        </div>

        <div class="cont">

            <img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg">

            <p><a href="#">欢迎回到慕课网学习新知识</a></p>

        </div>

        

    </div>    <!-- 此处写代码 -->    

</body>

</html>


正在回答

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

2回答

同学,你好。内容与大盒子.cons之间的左右边距不一样是因为没有通过计算正确的设置大盒子.con的大小,这里大盒子的大小应该为(242+20)*3=786px  ,修改如下:

http://img1.sycdn.imooc.com//climg/5c78dcbf0001efeb05510178.jpg

祝学习愉快

Steve007 2019-03-01 11:40:10

同学,你好。给.cons盒子设置margin:0 auto样式,就可以让整体左右居中了。如图:

http://img1.sycdn.imooc.com//climg/5c78a98a000143e412100064.jpg

祝学习愉快!

  • 提问者 Leeluo #1
    内容与大盒子.cons之间的左右两边间距不一样
    2019-03-01 12:24:12
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

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