请大神帮我分析一下为什么

如图定义一个无序列表按道理li元素里面的a标签中的首页两个字应该和后面四个一样骗到左边可是为什么只有他偏中间呢，这是为什么哪位大神帮我指出这个错误这错误是在是难以解决，无论如何它都不应该偏向右边啊

一下为代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="1.css">
<link rel="stylesheet" type="text/css" href="common.css">
</head>
<body>
<!-- 头部 -->
<div class="top">
<div class="topcontent">
<div class="topl fl">您好,欢迎来到建材网!</div>
<div class="topr fr">
<ul>
<li><a href="#">建材网首页</a></li>
<li><a href="#">我的商务室</a><s></s></li>
<li><a href="#">我的收藏</a><s></s></li>
<li><a href="#">建材服务</a><s></s></li>
<li><a href="#">客服中心</a></li>
<li><a href="#">网站导航</a><s></s></li>
</ul>
</div>
</div>
</div>
<!-- logo和搜索框 -->
<div class="logo">
<div class="logol fl">梅兰</div>
<div class="logor fr">
<input type="text" placeholder="请输入关键字" class="logosearch">
<input type="button" value="搜索" class="logobtn">
</div>
</div>
<!-- 导航 -->
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">建筑材料</a></li>
<li><a href="#">儿童安全座椅</a></li>
<li><a href="#">工艺美术品</a></li>
</ul>
</div>

</body>
</html>

这是css样式

@charset="UTF-8";

.top{

background: #F7F7F7;

height: 30px;

border-bottom: #D8D8D8 1px solid;

}

.topcontent{

width: 970px;

height: 30px;

margin: 0 auto;

}

.topl{

line-height: 30px;

margin-left: 10px;

}

.topr li{

float: left;

line-height: 30px;

padding-right: 10px;

}

.topr ul li s{

display: inline-block;

width: 10px;

height: 12px;

background: url(../meilan/sprite.fw.png) ;

}

.logo{

background: blue;

width: 970px;

height: 100px;

margin: 0 auto;

}

.logol{

width: 200px;

height: 84px;

background: url(../meilan/sprite.fw.png) -20px 0;

margin: 8px 0 14px 9px;

text-indent: -1000em;

}

.logor{

}

/*.logosearch{

}

.logobtn{

}*/

.nav{

background: green;

width: 970px;

height: 270px;

margin: 0 auto;

}

.nav li{

/*float: left;*/

/*margin-left: 14px;

margin-right: 17px;*/

line-height: 27px;

font: 16px 宋体 bold;

}

慕村2502594

浏览 996回答 1

1回答

随时随地看视频慕课网APP