CSS导航条想用百分比怎么用

linpyi 2008-04-29 06:53:23
/* CSS Document */
#top { height:30px;}
body,html { margin:0;
padding:0;
width:100%;
height:100%}
#layout { margin:0px auto;
width:795px;}


/*===============================导航==============================*/
/*定义总体宽度、高度;background:url(images/img_headerbg.jpg);; 控制背景颜色,居中对齐*/


/*控制一级菜单行高*/
#nav{
position:absolute;
line-height: 23px;
+line-height:25px;
list-style-type: none;
}

/*=======================一级目录======================*/
/* 一级菜左对齐 */
#nav li{
float: left;
}

/*一级菜单链接总体样式:每个菜单的宽,居中对齐,文字大小*/
#nav a{
display:block;
width:140px;//我想把这个改为百分比
height:25px;
+heithg:30px;
text-align:center;
font-size:12px;
color:#000;
font-weight:bold;
text-decoration:none;
background:url(../images/bg_nav_2.jpg);
padding-top:3px;
}

/* 鼠标在链接上 */
#nav a:hover{
color:#000;
text-decoration:none;
background:url(../images/bg_nav.jpg);
font-weight:bold;
}


/*=========================二级目录========================*/
/*二级菜单总体样式:行高24px;背景颜色;外框宽度;相对位置;
*边框一个象素,上边没样式,左右下边实线,边框颜色#D9C7DA;内边距1个象素
*/

#nav li ul{
line-height: 24px;
list-style-type: none;
text-align:left;
left: -999em;
width:156px;
+width:152px;
position: absolute;
border:1px solid #666;
}


/*二级菜单链接样式;背景宽度、左对齐,左缩进2*/
#nav li ul a{
display:block;
width:156px;
text-align:left;
color:#000;
text-decoration:none;
background:#f2f2f2;}


/*鼠标在链接上*/
#nav li ul a:hover{
color:#FFF;
text-decoration:none;
font-weight:normal;
background:#4AB0E3;
font-weight:bold;
}
/*==========================================================*/

#nav li:hover ul{
left: auto;
}

#nav li.sfhover ul{
left: auto;
}

#content{
clear: left;
}

/*====导航结束======*/


想把一级菜单改为百分比,如果改啊,我试过15%但是都是失败..
是不是需要计算当前的宽度
...全文
159 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
linpyi 2008-04-30
  • 打赏
  • 举报
回复
我有设置过百分比,但是没效果,最后都缩在一边了,没有按我设置的百分比显示
ddcatlee 2008-04-30
  • 打赏
  • 举报
回复
你如果想几个导航项平均分配,就要计算平均的百分比值,例如有5个项,那么就是100% / 5 =20%
不过,ie里面对于100%计算有时候会出问题,5个20%可能会大于100%,因此一般可以设为 19.9%
ddcatlee 2008-04-30
  • 打赏
  • 举报
回复
你要设 li 的宽度,不是<a>的,因为<a>的宽度以父元素<li>为基础,<li>以<ul>为基础。你的<li>左浮动的话,不设定宽度则会被压缩
KKK2007 2008-04-29
  • 打赏
  • 举报
回复
linpyi 2008-04-29
  • 打赏
  • 举报
回复
up
linpyi 2008-04-29
  • 打赏
  • 举报
回复
<div id="top" width="85%">
<UL id="nav">
<LI>
<a>条款查看</a>
<UL>
<LI>
<a href="">条款1</a>
</LI>
<LI>
<a href=">条款2</a>
</LI>
</UL>
</LI>
<LI>
<a>有问有答</a>
<UL>
<LI>
<a href="">·关于系统</a>
</LI>
<LI>
<a href="">·有问有答</a>
</LI>
</UL>
</LI>
<LI>
<a>系统管理</a>
<UL>
<LI>
<a href="">·修改密码</a>
</LI>
<LI>
<a href="">·设置</a>
</LI>
</UL>
</LI>
</UL>
</div>

这是我的导航信息

81,092

社区成员

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧