<!DOCTYPE html><html><head> <title>baidu</title> <meta charset="utf-8"> <style type="text/css"> *{margin:0; padding:0;} .header{ width: auto; height: 33px; background: white; border-bottom: 1px solid #ebebeb; } .navLef{float: left;} .navLeft li{ display: inline-block; line-height: 34px; padding-left: 12px; color:grey; font-size: 12px; } .navLeft li:nth-child(5){ text-decoration: underline; } .navLeft li:nth-child(6){ text-decoration: underline; } .navLeft li:nth-child(7){ text-decoration: underline; } .navLeft img{ width: 20px; height: 20px; vertical-align: middle; display: inline-block; } .navRight{ float: right; display: inline-block; font-size: 12px; } .navRight ul li{ display: inline; line-height: 34px; color: grey; } .main{ width: 100%; height: 663px; } .logo img{ width: 270px; height: 129px; position: relative; top:50%; left:50%; margin-left: -135px; margin-top:70px; margin-bottom: 15px; } .search input[type="text"]{ width: 536px; height: 40px; position: relative; top:50%; left: 50%; margin-left: -320px; } .search input[type="button"]{ width: 104px; height: 40px; position: relative; top:50%; left: 50%; margin-right:-52px; border: 0; background: #317ef3; color: white; } </style></head><body> <div class="header"> <div class="navLeft"> <ul> <li>上海 :</li> <img src="http://pluspng.com/img-png/art-of-sun-vector-png-sun-vector-png-images-pictures-becuo-900.png"> <li>9°C</li> <li>|</li> <li>换肤</li> <li>消息(1)</li> <li>显示频道</li> </ul> </div> <div class="navRight"> <ul> <li>新闻</li> <li>hao123</li> <li>地图</li> <li>视频</li> <li>贴吧</li> <li>学术</li> <li>ws02180018</li> <li>设置</li> <li>更多产品</li> </ul> </div> </div> <div class="main"> <div class="logo"> <img src="http://www.baidu.com/img/bd_logo1.png?where=super"> </div> <div class="search"> <form action="/" method="get"> <input type="text" name="textinput"> <input type="button" value="百度一下"> </form> </div> </div> <div class="footer"> <ul> <li>设为首页</li> <li>©2019</li> <li>Baidu</li> <li>使用百度前必读</li> <li>意见反馈</li> <li>京ICP证030173号</li> <img src="http://ss.bdimg.com/static/superman/img/copy_rignt_24.png"> <br> <li>京公网安备3838438号</li> </ul> </div></body></html>顶部右边的元素跑到第二行去了,经过chrome检查了一下,左边的ul内容占满了一行,不知道为什么.
1 回答
已采纳
业余奶茶品鉴师
TA贡献260条经验 获得超388个赞
不是ul占了一行，是它外面的div占了一行，你没有给 .navLsft 左浮动。
这个是你代码里的
.navLef {
float: left;
}navLef 少了个t ...
记得采纳一下～～
- 1 回答
- 0 关注
- 822 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消