当前位置:编程学习 > html/css >>

css jquery代码中为什么宽度这样设定.menu li ul 150px;.menu li ul a 110px;.menu li a中padding的20px

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> *{padding:0px; margin:0px;} body{font-size:12px;background:#000;} ul{list-style-type:none;} a{color:#fff; text-decoration:none;} .container{width:1024px; height:1000px;background:url(img/1.jpg) no-repeat;margin:0 auto;padding-top:100px;} .menu{background:url(img/bg1.png) repeat-x;height:30px; line-height:30px;} .menu li{float:left; position:relative;} .menu li a{float:left;height:30px; line-height:30px;padding:0px 20px;} .menu li ul{position:absolute;background:url(img/bg2.png); width:150px;} .menu li ul a{width:110px;} .one{border:1px solid #000;top:30px;} .one li a:hover{background:url(img/bg1.png);} </style> </head> <body> <div class="container"> <ul class="menu"> <li><a href="#">菜单一</a> <ul class="one"> <li><a href="#">菜单一</a></li> <li><a href="#">菜单二</a></li> <li><a href="#">菜单三</a></li> <li><a href="#">菜单四</a></li> <li><a href="#">菜单五</a></li></ul> </li> <li><a href="#">菜单二</a></li> <li><a href="#">菜单三</a></li> <li><a href="#">菜单四</a></li> <li><a href="#">菜单五</a></li> </ul> </div> </body> </html> 看的教程上说是150-2*20=110,我不明白是怎么回事?求解答,最好详细点,谢谢
追问:menu li ul a 110px;.中a标签宽度设置为110px了,左右内补丁20px了,不应该是算在110px里的吗?menu ul设置为150px
答案:.menu li a{float:left;height:30px; line-height:30px;padding:0px 20px;}
padding:0px 20px;}
这是左右边框是20.所以是40px;

.menu li ul 150px;.menu li ul a 110px;.menu li a
150px-(20*2)px=110px 就是这样的!
其他:以直接按shift键切换的,而且可以保留。设置的话你可以用组合键:
ctrl + shift + M调出菜单来,打开"设置属性"里面的“按键”,最上方有个“中英文切换”,选择“shift”,并把shift正下方的那排字选择打钩,保存就可以了! padding:0 20px完全写法是padding:0 20px 0 20px 

上一个:div+css中关于ie浏览器中非啊元素的:hover的实现问题,哪位大神指点下啊
下一个:css 属性选择器 ie6 不支持吗?

CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,