我正在使用 CSS 创建一个标题菜单。你可以在上面的网址上看到。HTML代码是
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Let's Be Foodie | Homemade Restaurant Style Food</title>
<link href="Style/main_css.css" rel="stylesheet" type="text/css" />
</head>
<div id="Header">
<ul>
<li><a href="#" title="Home"><span>Home</span></a></li>
<li><a href="#" title="Recipes"><span>Recipes</span></a></li>
<li><a href="#" title="Recipe Finder"><span>Recipe Finder</span></a></li>
<li><a href="#" title="Foodie Blog"><span>Foodie Blog</span></a></li>
<li><a href="#" title="Foodie Forum"><span>Foodie Forum</span></a></li>
<li><a href="#" title="Tips & Tricks"><span>Tips & Tricks</span></a></li>
</ul>
</div><!--Header class ends here-->
<body>
</body>
</html>
我的 CSS 是
#Header {
float: left;
width: 900px;
/* font-size:93%;*/
line-height: 45px;
background-color: #F00;
}
#Header ul {
width: 100%;
list-style: none;
background-color: #03C;
margin:auto;
}
#Header li {
display:inline;
margin:0;
padding:0;
text-align:center;
font-family:jokerman;
font-size:18px
}
#Header a {
float:left;
background:url("Green.png") no-repeat left top;
margin:0;
width:150px;
text-decoration:none;
}
#Header a span {
display:block;
background:url("Green.png") no-repeat right top;
color:#F00;
float:none;
}
#Header a:hover span {
color:#FFF;
background:url("Orange.png") no-repeat right top;
}
#Header a:hover {
background:url("Orange.png") no-repeat right top;
}
我怎样才能摆脱左边的额外边距?
查看我的问题的 URL 是:http ://cooking.comyr.com/