Question

我一直在研究这个问题一个星期。在我伸出手之前，我更愿意尝试自己，但我认为就是那个时候。我有一个CSS水平菜单，有一个图像。我可以通过精灵来移动图像，但是我有高度和x y正确对齐的问题。有人能告诉我我做错了什么吗？ Fiddler这里

先谢谢你，提供任何帮助

body{
  margin: 0px 0px 0px 0px;
  width: auto;
  background-color: #ebebeb;
  font-family:Tahoma, Geneva, sans-serif;
  color:#900;
}

a{
  text-decoration: none;	
  color: inherit;
}

.clear {
  clear: both;
}

.displace {
  position: absolute;
}

#phc_header{
  margin: 0px 0px 0px 0px;
  background-image: url(../images/bk_tile.png);
  background-color: #ebebeb;
  height: 145px;
  width: Auto;
}

.phc_logo{
  padding-left: 50px;
  height: 145px;
  width: 605px;
}

#phc_navigation{
  margin: 0px 0px 0px 0px;
  background-image: url(../images/phc_nav_bk.png);
  background-color: #ebebeb;
  height: 43px;
  width: Auto;	
  font-weight: lighter;
  font-size: 16px;
  font-family: Tahoma, Geneva, sans-serif;
}
/*--- Navigation height 43px; ---*/
#phc_navigation ul{
  height: 43px;
  list-style-type: none; 
}

#phc_navigation li{
  height:auto;
  margin-top: 11px;
  float: left;
  list-style-type:none;
  white-space: nowrap;
}

.phc_nav_div{
  float:left;
  width:4px;
  height:43px;
  background-image: url(../images/phc_nav_split.png);
}

#phc_navigation li a{
  display: block;
  height: 43px;
  font-size: 16px;
  font-weight: normal;
  text-transform: uppercase;
  color: #909090;   
}

#phc_navigation li a:hover{
  margin-bottom: 11px;
  text-align: center;
  background-image:	url(../images/phc_nav_bk.png);
  background-position: 0px 86px;
  color: #dedede;
}

#phc_crumb{
  background-color: #ebebeb;
  height: 10px;
  width: Auto;	
}

#phc_main{
  background-color: #ebebeb;
  height: : 100%;
  width: Auto;
}

#phc_footer{
  background-image: url(../images/phc_footer_bk.png);
  background-color: #ebebeb;
  height: 239px;
  width: Auto;	
}

<!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>Paris-Henry County dot COM</title>
  <link href="css/style.css" rel="stylesheet" type="text/css" />
  <link rel="icon" type="image/png" href="favicon/favicon.ico" />
</head>

<body>
  <div id="phc_header"><a href="index.php"><img src="images/logo.png" class="phc_logo"></a></div>
  <div>
  <div class="clear"> </div>

      <ul id="phc_navigation">
        <div class="phc_nav_div"> </div>
        <li class="phc_home_link"><a href="Home" title="Home">Home</a></li>
        <div class="phc_nav_div"> </div>
        <li class="phc_login_link"><a href="Login" title="Login">Login</a></li>
        <div class="phc_nav_div"> </div>
        <li class="phc_logoff_link"><a href="logoff" title="Log Off">Log Off</a></li>
        <div class="phc_nav_div"> </div>
        <li class="phc_register_link"><a href="Register" title="Register">Register For An Account</a></li>
        <div class="phc_nav_div"> </div>
        <li class="phc_myaccount_link"><a href="account" title="My Account">My Account</a></li>
        <div class="phc_nav_div"> </div>
        <li class="phc_publish_link"><a href="publish" title="Home">Publish Your Ad!</a></li>
        <div class="phc_nav_div"> </div>
      </ul>


  </div>
  <div id="phc_shadow"></div>
  <div id="phc_search"></div>
  <div id="phc_crumb"></div>
  <div id="phc_main"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
  <div id="phc_footer"></div>

</body>
</html>

Answer 1

必要的更改如下

#phc_navigation li{
  margin-top: 11px; //delete this line
}

#phc_navigation li a {  
  line-height: 43px; //add this line
}

使用CSS定位的问题

1 个答案: