CSS导航栏为什么都用 li + a标签

最新推荐文章于 2025-03-10 20:17:27 发布

雪急飞绪

最新推荐文章于 2025-03-10 20:17:27 发布

阅读量4.3k

点赞数

分类专栏： CSS

原文链接：https://www.zhihu.com/question/23459855/answer/24781270

版权

CSS 专栏收录该内容

3 篇文章

订阅专栏

导航菜单为什么都用 li+a 标签

html导航菜单为什么都用li+a标签，而不直接用a标签，或者用nav+a标签，html5中导航菜单该怎样写？

<nav> 元素表示一个包含多个链接的区域，这些链接指向其他页面或本页面的其他部分

需要注意：

并不是所有的链接都要放到 nav 元素里面，该元素内容包含用于构成主要导航区块的部分
如果 nav 元素里面的内容描述的是一个项目列表，那就应该用列表标记（ol、ul等）帮助理解（增强语义）和导航
用户代理（屏幕阅读器）可以通过该元素来确定页面上哪些内容可以直接跳过或者按要求提供选择

通常一个页面导航可以这么写：

<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<!-- 或 -->

<div id="nav">
   <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

水平导航栏

先去除默认样式

ul{
	list-style: none;
	padding: 0;
	margin: 0;
}
li a{
	text-decoration: none;
}

两种方式创建水平导航栏

display:inline-block
display:float

display:inline-block

ul{
	list-style: none;
	padding: 0;
	margin: 0;
}
li{
	display: inline-block;
	text-align: center;
	background: #e3e3e3;
}
li a{
	text-decoration: none;
	/* 如果要更改 a 链接的尺寸，需要给它 block 化 */
	display: inline-block;
	width: 50px;
}

需要注意： display:inline-block ， block 和 block 之间会有一个空格显示

浏览器默认行为是吧 inline 元素间的空白字符（空白/换行/tab）渲染成一个空格

display:float

ul {
	list-style: none;
	padding: 0;
	margin: 0;
    /* 父级元素 触发BFC */
	overflow: hidden;
}
li {
	float: left;
	text-align: center;
	background: #e3e3e3;
}
li a {
	text-decoration: none;
    /* 如果要更改 a 链接的尺寸，需要给它 block 化 */
	display: inline-block;
	width: 50px;
}

需要注意：由于有浮动元素，需要清除浮动

水平导航栏案例

HTML结构

<!-- 当用户点击label元素时，该label所绑定的input单选框就会被选中，
同时通过使用CSS选择器让被选中的input元素之后的label和content元素都加上相应的样式 -->
<ul>
	<li>
		<input type="radio" id="tab1" name="tab" />
		<label for="tab1">选项一</label>
		<div class="content">选项一内容</div>
	</li>
	<li>
		<input type="radio" id="tab2" name="tab" />
		<label for="tab2">选项二</label>
		<div class="content">选项二内容</div>
	</li>
	<li>
		<input type="radio" id="tab3" name="tab" />
		<label for="tab3">选项三</label>
		<div class="content">选项三内容</div>
	</li>
</ul>

CSS样式

<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}
	ul {
		position: relative;
		width: 300px;
	}
	ul li {
		list-style: none;
	}
	ul li input {
		display: none;
	}
	ul li label {
		float: left;
		width: 100px;
		text-align: center;
		line-height: 30px;
		border: 1px solid #000;
		box-sizing: border-box;
		cursor: pointer;
		transition: all .3s;
	}
	ul li input:checked+label {
		color: #fff;
		background-color: #000;
	}
	ul li .content {
		position: absolute;
		opacity: 0;
		visibility: hidden;
		left: 0;
		top: 31px;
		height: 300px;
		width: 100%;
		border: 1px solid #000;
		box-sizing: border-box;
		font-size: 24px;
		text-align: center;
		/* vertical-align只对行内元素有效，对块元素无效 */
		/* 让 line-height 与div高度一致即可 */
		line-height: 300px;
		transform: all .3s;
	}
	ul li:nth-child(1) .content {
		background: #0f0;
	}
	ul li:nth-child(2) .content {
		background: #00f;
	}
	ul li:nth-child(3) .content {
		background: #ff0;
	}
	ul li input:checked~.content {
		opacity: 1;
		visibility: visible;
	}
</style>

需要注意：

.content 和 input 都需要先隐藏
input:checked+label 表示被选中的单选框后的 label 元素需要做标记
input:checked~.content 表示被选中的单选框后的 .content 元素需要显示

效果如下：

垂直导航

和前面不同的是，通过设置 ul 的宽度，使其垂直显示

ul {
	list-style: none;
	padding: 0;
	margin: 0;
	width: 50px;
}
li {
	float: left;
	text-align: center;
	background: #e3e3e3;
}
li a {
	text-decoration: none;
	display: inline-block;
	width: 50px;
}

水平导航栏案例

HTML 结构

<ol class="tree">
	<li>
		<label for="floder1">Folder1</label>
		<!-- 注意：input+ol 选择紧接input之后的所有ol -->
		<input type="checkbox" id="floder1" checked="checked" />
		<ol>
			<li class="file"><a href="#">File1</a></li>
			<li>
				<label for="subfloder1">SubFloder1</label>
				<input type="checkbox" id="subfloder1" checked="checked" />
				<ol>
					<li class="file"><a href="#.js">SubFile1</a></li>
					<li class="file"><a href="#">SubFile2</a></li>
				</ol>
			</li>
		</ol>
	</li>
	<li>
		<label for="floder2">Folder2</label>
		<!-- 注意：input+ol 选择紧接input之后的所有ol -->
		<input type="checkbox" id="floder2" />
		<ol>
			<li class="file"><a href="#">File1</a></li>
			<li>
				<label for="subfloder2">SubFloder1</label>
				<input type="checkbox" id="subfloder2" />
				<ol>
					<li class="file"><a href="#.css">SubFile1</a></li>
					<li class="file"><a href="#">SubFile2</a></li>
				</ol>
			</li>
		</ol>
	</li>
	<li>
		<label for="floder3">Folder3</label>
		<!-- 注意：input+ol 选择紧接input之后的所有ol -->
		<input type="checkbox" id="floder3" />
		<ol>
			<li class="file"><a href="#">File1</a></li>
			<li>
				<label for="subfloder3">SubFloder1</label>
				<input type="checkbox" id="subfloder3" />
				<ol>
					<li class="file"><a href="#">SubFile1</a></li>
					<li class="file"><a href="#">SubFile2</a></li>
				</ol>
			</li>
		</ol>
	</li>
</ol>

CSS样式

<style type="text/css">
	ol.tree {
		/* 上右下左 */
		padding: 0 0 0 30px;
		width: 300px;
	}
	li {
		position: relative;
		margin-left: -15px;
		list-style: none;
	}
	li.file {
		margin-left: -1px !important;
	}
	li.file a {
		background: url(img/document.png) no-repeat;
		color: #4C4C4C;
		padding-left: 20px;
		text-decoration: none;
		display: block;
	}
	/* 匹配 href 结尾带有.js的所有元素 */
	li.file a[href $=".js"] {
		color: aqua;
	}
	/* 匹配 href 中带有.css字符串的所有元素 */
	li.file a[href *=".css"] {
		color: aqua;
	}
	li input {
		cursor: pointer;
		position: absolute;
		opacity: 0;
	}
	li label {
		background: url(img/folder-horizontal.png) no-repeat;
		cursor: pointer;
		display: block;
		padding-left: 20px;
	}
	li input+ol>li {
		display: none;
	}
	li input:checked+ol>li {
		display: block;
	}
</style>