迷惑height line-height

最新推荐文章于 2023-02-25 00:21:30 发布

记录杂文

最新推荐文章于 2023-02-25 00:21:30 发布

阅读量124

点赞数

分类专栏： html 问题系列

本文链接：https://blog.csdn.net/ShenYouRong/article/details/106560733

版权

html 问题系列专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1 注意 ul li (width height 滥用）

2使用height

使用 line-height

<!DOCTYPE html>
<html>
<head>
	<title>折叠菜单</title>
	<link rel="stylesheet" type="text/css"
	 href="../css/foldamenu.css">
</head>
<body>
	<div class="menu">
		<ul class="nav">
			<li>一级菜单<span>&gt</span>
				<ul class="sub">
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
					
					
				</ul>
			</li>
			<li>一级菜单<span>&gt</span></li>
			<li>一级菜单<span>&gt</span></li>
			<li>一级菜单<span>&gt</span></li>
			<li>一级菜单<span>&gt</span></li>
			<li>一级菜单<span>&gt</span></li>
			<li>一级菜单<span>&gt</span></li>
			<li>一级菜单<span>&gt</span></li>
		</ul>
	</div>

</body>
</html>

*{
	margin: 0;
	padding: 0;

}

.nav{
	list-style: none;
	width: 300px;
	margin: 50px auto;
	overflow: hidden;
	
}
.nav> li{
	/*height: 30px;*/
	line-height: 30px;
	text-indent: 20px;
	border: 1px solid #000;
	border-bottom: none;
	box-sizing: border-box;
	position: relative;
	
}
ul li span{
	position: absolute;
	top: 0;
	right: 20px;

}
.sub >li{
	height: 30px;
	list-style: none;
	background-color: purple;
	/*border: 1px solid #000;*/
	border-bottom: red;

}