需要您就此事提供所有帮助。我现在卡在这个css定位上的标识应该在菜单导航的中间,就像这个网站http://theorydesign.ca/ ......这就是我想要实现的目标。< / p>
这是我的代码:
<!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>
答案 0 :(得分:0)
看起来他们正在使用导航容器,然后将文本的边距设置为偏离中心。线条是图像和徽标。链接是由边距调整的li。要创建此效果,请首先创建一个具有自动边距和设置宽度的容器。将文本浮动到中心的左侧或右侧。一旦你有文字担心图像放置。没有一种方法可以实现这一目标。你可以使用html / css,jQuery等。