首页 > web前端 > html教程 > li中嵌套ul的边距问题,求大神_html/css_WEB-ITnose

li中嵌套ul的边距问题,求大神_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 11:46:29
原创
1545 人浏览过


图片中第四个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;}

 

  • ccc

  •             

  •                 



      去掉width

      设置pdding:0;可以解决,或者你把ul设定宽度或者百分比,这样li就可以随意改变了

  • 来源:php.cn
    本站声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板