> 웹 프론트엔드 > HTML 튜토리얼 > li中嵌套ul的边距问题,求大神_html/css_WEB-ITnose

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

WBOY
풀어 주다: 2016-06-24 11:46:29
원래의
1544명이 탐색했습니다.


图片中第四个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으로 문의하세요.
    인기 튜토리얼
    더>
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿