这样写行么?

来源:2-2 编程练习

如花慕少

2019-12-18 19:40:55

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">  

    <title>CSS布局</title>

    <style type="text/css">

        *{

            margin: 0;

            padding:0;

        }

        /*此处写代码*/

        .header{

            width:100%;

            height:100px;

            border:1px solid #b3b3b3;

        }

        

        .logo img{

            width:220px;

            height:90px;

            margin-left:60px;

            margin-top:5px;

        }


        .header .logo{

            float:left;

        }


        .header .nav{

            float:right;

        }


        .header .nav ul{

            margin-right:80px;

            font:bold 20px "微软雅黑";

        }


        .header .nav ul li{

            float:left;

            list-style:none;

            line-height:100px;

            width:120px;

        }




    </style>

</head>

<body>

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

    <div class="header">

        <div class="logo">

            <img src="http://climg.mukewang.com/595dd5120001736902000080.png" alt="logo">

        </div>

        <div class="nav">

            <ul>

                <li>前端</li>

                <li>后端</li>

                <li>移动端</li>

                <li>数据库</li>

            </ul>

        </div>

    </div>

</body>

</html>


写回答

1回答

好帮手慕言

2019-12-19

同学你好,使用同学提供的代码测试,页面出现了横向滚动条。原因是:类名为.header的元素宽度设置100%,又设置边框。建议:去掉设置的宽度。代码参考:
http://img.mukewang.com/climg/5dfad7bc094e9ab604500208.jpg

如果我的回答帮到了你,欢迎采纳,祝学习愉快~

0

0 学习 · 40143 问题

查看课程