-1

在这件事上需要你的所有帮助。我目前被困在这个 css 定位上，徽标应该就在菜单导航的中间，就像这个网站http://theorydesign.ca/ .... 这就是我想要实现的目标。

这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Position</title>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">

<style>
body { 
  font:12px Arial, Helvetica, sans-serif; 
  color:#000;
}
.container { 
  width:100%; 
  height:100%; 
  position:absolute; 
  left:0; 
  top:0; 
 }
#header { 
  width: 100%; 
  height: 96px; 
  position: fixed; 
  left: 0; 
  top: 0; 
  background-color: #f8f8f8; 
  border-bottom: 1px solid #e4e4e4; 
  z-index:9999;
}  
#logo { 
  width:76px; 
  height:64px; 
  display:block; 
  position: absolute; 
  left:50%; 
  margin-left:-43px; /*I'm not sure if this is the right assigned value for this. Don't know the number/value that i should assign*/
  top:15px;
} 
#logo a { 
  background:url(logo.png); 
  display:block; 
  width:76px; 
  height:64px;
}
#menu-left { 
  width:256px; /*This is just the number/value that I assign based on the size of my screen*/
  left:50%;
  top:24px; 
  margin-left:-350px;
  z-index:3;
}
#menu-right {
  width:256px; /*This is just the number/value that I assign based on the size of my screen*/
  right:50%;
  top:24px;
  margin-right:-350px;
  margin-left:0;
  z-index:3;
}
.menu {
  position:absolute;
  font-family: Arial, Helvetica, sans-serif;
  font-size:15px;
  line-height:30px;
  text-transform:uppercase;
  margin:0;
}
.menu li {
  float:right;
  margin-left:65px;
  line-height:35px;
  margin-bottom:0;
  position:relative;
  list-style:none;
}
#menu-right li {
  float:left;
  margin-left:0;
  margin-right:65px;
}
.menu  li a {
  color:#000;
  text-decoration:none;
}
.menu  li a:hover {
  color:#999;
}
</style>

</head>
<body>
 <div class="container">
  <div id="header">
   <div id="logo">
    <a href="index.html"></a>
   </div>
   <ul class="menu" id="menu-left">
    <li>
     <a href="#menu1">Menu1</a>
    </li>
    <li>
     <a href="#menu2">Menu2</a>
    </li>
   </ul>        
   <ul class="menu" id="menu-right">
    <li>
     <a href="#menu3">Menu3</a>
    </li>
    <li>
     <a href="#menu4">Menu4</a>
    </li>
   </ul>    
  </div>
 </div>
</body>
</html>
4

1 回答 1

0

他们似乎正在使用导航容器，然后将文本的边距设置为偏离中心。线条是图像和徽标。链接是由边距调整的 li 。要创建此效果，首先要创建一个具有 auto 边距和设置宽度的容器。将文本浮动到中心的左侧或右侧。一旦你有文字担心图像的位置。没有一种方法可以做到这一点。您可以使用 html/css、jQuery 等。

于 2012-10-31T19:52:44.550 回答