如何居中导航栏
问题描述:
Hy!如何居中导航栏
我不知道如何集中导航栏请帮助!
HTML:
<html>
<script src="jquery-1.6.1.min.js"></script>
<script src='jquery.divslideshow-1.2-min.js' type='text/javascript'></script>
<script type="text/javascript">
/***
Simple jQuery Slideshow Script
Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :)
***/
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ($active.length == 0) $active = $('#slideshow IMG:last');
// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
// uncomment the 3 lines below to pull the images in random order
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length);
// var $next = $($sibs[ rndNum ]);
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval("slideSwitch()", 5000);
});
</script>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<body>
<div id="page-wrap">
<table>
<tr>
<td><img src="images/logo.png"/></td>
<td> <div id="slideshow">
<img src="/images/trompete.jpg" alt="Slideshow Image 1" class="active" />
<img src="/images/floete.jpg" alt="Slideshow Image 1" />
</div></td>
</tr>
</table>
<div class="container">
<ul id="minitabs">
<li><a href="#" class="active">News</a></li>
<li><a href="#" >Fotos</a></li>
<li><a href="#">Mitglieder</a></li>
<li><a href="#">Jugend</a></li>
<li><a href="#">Gästebuch</a></li>
<li><a href="#">Intern</a></li>
</ul>
</div>
<br/>
<div><p>Pellentesque habitant morbi</p>
</div>
</div>
</body>
</head>
</html>
的CSS:
#page-wrap { position: relative; width: 1024px;
margin: 50px auto; padding: 20px;
background: white; -moz-box-shadow: 0 0 20px black;
-webkit-box-shadow: 0 0 20px black;
box-shadow: 0 0 20px black; -webkit-border-radius:30px;
}
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
}
#nav li {
float: left; }
#nav li a {
display: block;
padding: 10px 56px;
text-decoration: none;
font-weight: bold;
color: #069;
}
#nav li a:hover {
color: #c00;
background-color: #fff; }
p { font: 15px/2 Georgia, Serif; margin: 0 0 30p x 0; text-indent: 5px; }
#slideshow {
position:relative;
height:165px;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
height:146px;
width: 650px;
}
#slideshow IMG.active {
z-index:10;
}
#slideshow IMG.last-active {
z-index:9;
}
.container {
padding: 1px;
margin: 40px 0px 40px 0;
background: #fff;
}
#minitabs {
margin: 0;
padding: 0 0 40px 10px;
border-bottom: 1px solid #587DC6;
}
#minitabs li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#minitabs a:link, #minitabs a:visited {
float: left;
font-size: 40px;
line-height: 10px;
font-weight: bold;
margin: 0 10px 4px 10px;
padding-bottom: 2px;
text-decoration: none;
color: #C6C6C6;
}
#minitabs a.active:link, #minitabs a.active:visited, #minitabs a:hover {
border-bottom: 4px solid #B80028;
padding-bottom: 20px;
background: #fff;
color: #587DC6;
}
答
要居中你的资产净值,你需要做到以下几点:
CSS:
- 在
#minitabs
分配text-align:center;
- 在
#minitabs a:link, #minitabs a:visited
删除或注释掉float:left;
这应围绕你的资产净值。你将不得不在你的导航中调整你的一些样式,让它看起来和以前一样,但至少它应该是你的起点。
查看的jsfiddle活动链接:http://jsfiddle.net/AvavN/
请修剪你的代码下降到仅相对于导航栏部分,或张贴的jsfiddle – Petah 2011-06-08 02:05:13
在使用的#nav css样式,我没有看到标识=“nav”在html中的任何地方。 – baraboom 2011-06-08 02:12:10
未使用#nav。 – user547995 2011-06-08 02:18:23