Maison >interface Web >tutoriel HTML >li中嵌套ul的边距问题，求大神_html/css_WEB-ITnose
li中嵌套ul的边距问题，求大神_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 11:46:291548parcourir
图片中第四个li中我嵌套了一个ul，设定嵌套ul中li的背景色时，总是不能将嵌套的ul全部的嵌套到li中。
应该如何解决呢？
回复讨论(解决方案)
第四个li display: table;
设置ul，li的padding:0
第四个li display: table;
<html lang='en'> <head> <meta charset='utf-8'> <title>ul-study</title> <style type="text/css"> .ul-01{list-style-type: none;} .ul-01>li{float: left;margin: 5px;padding: 3px 10px; background-color: red;cursor: pointer;border-radius: 5px;} .ul-02{list-style-type: none;margin: 0px;} .ul-02>li{margin: 3px 0px;mbackground-color: blue;padding: 0px 10px;width: 100%;background-color: blue;} </style> <script type="text/javascript"> window.onload=function(){ var ulss=document.getElementById('ul-02-s'); function lish(para){ var lis=document.getElementsByName('lis'); for(var i=0;i<lis.length;i++){ lis[i].style.display=para; } } ulss.onmouseover=function(){ lish("block"); } ulss.onmouseout=function(){ lish("none"); } } </script> </head> <body> <ul class='ul-01'> <li>bbb</li> <li>aaa</li> <li>ccc</li> <li style='padding:0px 0px;display:table;'> <ul class='ul-02' id='ul-02-s'> <li>请选择</li> <li class='li-sh' name='lis'>111</li> <li class='li-sh' name='lis'>222</li> <li class='li-sh' name='lis'>333</li> </ul> </li> </ul> </body></html> 这是代码,display=table还是不行
设置ul，li的padding:0
不行的，我试过了
.ul-02>li{margin: 3px 0px;mbackground-color: blue;padding: 0px 10px;background-color: blue;}
去掉width
设置pdding：0；可以解决，或者你把ul设定宽度或者百分比，这样li就可以随意改变了
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：无法显示您正在查找的页面，因为使用了无效的方法（http谓词）。_html/css_WEB-ITnoseArticle suivant：display:none;与visibility:hidden;的区别_html/css_WEB-ITnose