Home >Web Front-end >HTML Tutorial >Margin problem of nested ul in li, please ask a master_html/css_WEB-ITnose
Margin problem of nested ul in li, please ask a master_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:46:291548browse
I have a ul nested in the fourth li in the picture. When setting the background color of the li in the nested ul, I cannot always nest all the nested uls into the li.
How to solve it?
Reply to discussion (solution)
The fourth li display: table;
Set ul, li padding: 0
The fourth 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> This is the code, display=table still doesn’t work
Set ul, li padding:0
No, I tried
.ul-02>li{margin: 3px 0px;mbackground-color: blue;padding: 0px 10px;background-color: blue;}
25edfb22a4f469ecb59f1190150159c6cccbed06894275b65c1ab86501b08a632eb
Remove width
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn