Rumah > hujung hadapan web > html tutorial > li中嵌套ul的边距问题,求大神_html/css_WEB-ITnose

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

WBOY
Lepaskan: 2016-06-24 11:46:29
asal
1544 orang telah melayarinya


图片中第四个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>
Salin selepas log masuk

这是代码,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就可以随意改变了

  • sumber:php.cn
    Kenyataan Laman Web ini
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
    Tutorial Popular
    Lagi>
    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan