这样写行么?
来源: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回答
同学你好,使用同学提供的代码测试,页面出现了横向滚动条。原因是:类名为.header的元素宽度设置100%,又设置边框。建议:去掉设置的宽度。代码参考:
如果我的回答帮到了你,欢迎采纳,祝学习愉快~
相似问题