61,112
社区成员
发帖
与我相关
我的任务
分享DIV 中如何使得LI居中
我设计了一个导航栏，但是了很多种方法都不能使之居中，请各位帮帮改改并说明问题所在，
另外还有一个问题（能回答就回答），我想使得用户当前所处的页面所对应的导航项目背景为一张图片（例如当前在 “首页”，那么“首页”的背景为一张图片），
![]()
当我跳转到“留言”时那么“留言”的背景设为图片，我的设想是为当前链接添加一个class(即下面的curent),请大家提供你们的思路，代码如下：
<style type="text/css">
body
{
text-align:center;
}
#linkBar
{
text-align:center;
}
#Nav
{
}
#Nav li
{
float:left;
list-style-type:none;
text-align:center;
}
#Nav li a
{
width:97px;
height:22px;
background-color:#666666;
color:#000000;
text-decoration:none;
display:block;
text-align:center;
padding-top:4px;
margin-left:2px;
}
#Nav li a:hover
{
background-color:#FF6600;
border:double;
}
.curent
{
background-image:url(../Image/link.jpg);
}
</style>
</head>
<body>
<div id="linkBar">
<ul id="Nav">
<li><a href="" class="curent">首页</a></li>
<li><a href="">文章</a></li>
<li><a href="">参考</a></li>
<li><a href="">Blog</a></li>
<li><a href="">论坛</a></li>
<li><a href="">联系</a></li>
</ul>
</div>
</body>
另外还有一个问题（能回答就回答），我想使得用户当前所处的页面所对应的导航项目背景为一张图片（例如当前在 “首页”，那么“首页”的背景为一张图片），
当我跳转到“留言”时那么“留言”的背景设为图片，我的设想是为当前链接添加一个class(即下面的curent),请大家提供你们的思路，代码如下：
<style type="text/css">
body
{
text-align:center;
}
#linkBar
{
text-align:center;
}
#Nav
{
}
#Nav li
{
float:left;
list-style-type:none;
text-align:center;
}
#Nav li a
{
width:97px;
height:22px;
background-color:#666666;
color:#000000;
text-decoration:none;
display:block;
text-align:center;
padding-top:4px;
margin-left:2px;
}
#Nav li a:hover
{
background-color:#FF6600;
border:double;
}
.curent
{
background-image:url(../Image/link.jpg);
}
</style>
</head>
<body>
<div id="linkBar">
<ul id="Nav">
<li><a href="" class="curent">首页</a></li>
<li><a href="">文章</a></li>
<li><a href="">参考</a></li>
<li><a href="">Blog</a></li>
<li><a href="">论坛</a></li>
<li><a href="">联系</a></li>
</ul>
</div>
</body>
...全文
请发表友善的回复…
发表回复
ddcatlee 2009-10-10
- 打赏
- 举报
1。 http://www.macji.com/2008/07/29/to-achieve-cross-browser-css-float-center/
2。 http://www.ddcat.net/blog/?p=823
2。 http://www.ddcat.net/blog/?p=823
西安风影 2009-10-10
- 打赏
- 举报
设置float:left;后，貌似居中就很难
whxwchg 2009-10-10
- 打赏
- 举报
<style type="text/css">
body
{
text-align:center;
margin:0;padding:0;
}
#linkBar
{
position:relative;
margin:0 auto;
width:780px;
}
#Nav
{
width:780px;
float:left;
list-style-type:none;
}
#Nav li
{
float:left;
display:inline;
}
#Nav li a
{
width:97px;
height:22px;
background-color:#666666;
color:#000000;
text-decoration:none;
display:block;
padding-top:4px;
margin-left:2px;
}
#Nav li a:hover
{
background-color:#FF6600;
border:double;
}
.curent
{
background-image:url(../Image/link.jpg);
}
</style>
</head>
<body>
<div id="linkBar">
<ul id="Nav">
<li> <a href="" class="curent">首页 </a> </li>
<li> <a href="">文章 </a> </li>
<li> <a href="">参考 </a> </li>
<li> <a href="">Blog </a> </li>
<li> <a href="">论坛 </a> </li>
<li> <a href="">联系 </a> </li>
</ul>
</div>
</body>
body
{
text-align:center;
margin:0;padding:0;
}
#linkBar
{
position:relative;
margin:0 auto;
width:780px;
}
#Nav
{
width:780px;
float:left;
list-style-type:none;
}
#Nav li
{
float:left;
display:inline;
}
#Nav li a
{
width:97px;
height:22px;
background-color:#666666;
color:#000000;
text-decoration:none;
display:block;
padding-top:4px;
margin-left:2px;
}
#Nav li a:hover
{
background-color:#FF6600;
border:double;
}
.curent
{
background-image:url(../Image/link.jpg);
}
</style>
</head>
<body>
<div id="linkBar">
<ul id="Nav">
<li> <a href="" class="curent">首页 </a> </li>
<li> <a href="">文章 </a> </li>
<li> <a href="">参考 </a> </li>
<li> <a href="">Blog </a> </li>
<li> <a href="">论坛 </a> </li>
<li> <a href="">联系 </a> </li>
</ul>
</div>
</body>
jiangtianyin 2009-10-08
- 打赏
- 举报
