这段CSS导航代码，问题出在了哪儿？
我想让<li>列表一个个往左排，并且清除浮动，而且导航和头部benner中间有白条是怎么回事，我是菜鸟。谢谢了。<html><head><metahttp-equiv="...
我想让<li>列表一个个往左排，并且清除浮动，而且导航和头部benner中间有白条是怎么回事，我是菜鸟。谢谢了。
<html >
<head>
<meta http-equiv="content-type"; content="text/html;charset=gb2312;">
<title>导航栏</title>
<style type="text/css">
#header
{width:760px; height:120px;border:0px; margin:0 auto;background:url
(http://h.hiphotos.baidu.com/image/pic/item/203fb80e7bec54e7c1faa817bb389b504fc26aa1.jpg) no-repeat 0 0
}
#menu {width:760px;height:125px;overflow:hidden;border:0;margin:0 auto;zoom:1;
}
.a1{width:35px; height:125px; border:0px; background:red;
}
.a1 li{list-style-type:none;float:left; margin:0 auto;font-size:10px/20px black;text-align:center;
}
.a1 a{color:black;text-decoration:none; background:yellow;display:block;
}
.a1 a:hover {background:green;color:white;
}
body {margin:0px auto;
}
</style>
<body>
<div id="header"></div>
<div id="menu">
<ul class="a1">
<li >
首页
</li>
<li>
所有作品
</li>
<li>
家用电器
</li>
<li>
公司简介
</li>
<li>
联系方式
</li>
</ul>
</div>
</body>
</html>
现在成这样了，效果出来了，主要是文字和招牌中间有红边，而且我想在首页后面加一个竖条怎么加，还有就是首页左边和上边的红块怎么去了，我用margin：0没用。 展开
<html >
<head>
<meta http-equiv="content-type"; content="text/html;charset=gb2312;">
<title>导航栏</title>
<style type="text/css">
#header
{width:760px; height:120px;border:0px; margin:0 auto;background:url
(http://h.hiphotos.baidu.com/image/pic/item/203fb80e7bec54e7c1faa817bb389b504fc26aa1.jpg) no-repeat 0 0
}
#menu {width:760px;height:125px;overflow:hidden;border:0;margin:0 auto;zoom:1;
}
.a1{width:35px; height:125px; border:0px; background:red;
}
.a1 li{list-style-type:none;float:left; margin:0 auto;font-size:10px/20px black;text-align:center;
}
.a1 a{color:black;text-decoration:none; background:yellow;display:block;
}
.a1 a:hover {background:green;color:white;
}
body {margin:0px auto;
}
</style>
<body>
<div id="header"></div>
<div id="menu">
<ul class="a1">
<li >
首页
</li>
<li>
所有作品
</li>
<li>
家用电器
</li>
<li>
公司简介
</li>
<li>
联系方式
</li>
</ul>
</div>
</body>
</html>
现在成这样了，效果出来了，主要是文字和招牌中间有红边，而且我想在首页后面加一个竖条怎么加，还有就是首页左边和上边的红块怎么去了，我用margin：0没用。 展开
4个回答
展开全部
<html>
<head>
<meta http-equiv="content-type"; content="text/html;charset=gb2312;">
<title>导航栏</title>
<style type="text/css">
*{margin:0;padding: 0;}
.clear{content:".";display:block;clear:both;}
li{list-style-type:none;}
#header{width:760px;height:120px;border:0px;margin:0 auto;background:url(
) no-repeat 0 0}
#menu{width:760px;height:125px;overflow:hidden;border:0;margin:0 auto;zoom:1;}
.a1{height:125px;border:0px;background:red;}
.a1 li{float:left; padding:10px 15px;font-size:10px/20px black;text-align:center;}
.a1 a{color:black;text-decoration:none;background:yellow;display:block;}
.a1 a:hover{background:green;color:white;}
</style>
<body>
<div id="header"></div>
<div id="menu">
<ul class="a1 clear">
<li> 首页|</li>
<li>所有作品</li>
<li>家用电器</li>
<li>公司简介 </li>
<li>联系方式</li>
</ul>
</div>
</body>
</html>
你那个白边要记得样式重置，去掉各个浏览器的默认样式
追问
你Q多少，我加你，有时间还望赐教。你说的样式重置，我试过了，确实OK了，但是能告诉我是哪个元素加了边距或填充吗？？
追答
简单的说就是说不同浏览器对于相同元素的默认样式并不一致，你写样重置就好
你的那个白边是ul的margin值
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
c s s
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
咳，，，你的.a1宽度才35px，，，把它改大，或者auto就可以了。
追问
为什么我定义的menu这个div感觉没用呢？？
追答
你定义MENU有什么用，，，你的UI用的是A1，，A1里又定义的宽度，，那UL的宽度只有35，那UL里的LI当然就会被挤在里面啦。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你ul a1的宽度和高度是有问题的，自己改改试试
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
