使用多个li标签产生空白间隙解决方法

源代码


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.navbar ul{
				list-style: none;
				padding: 0;
				background-color: aquamarine;
			}
			.navbar li{
				display: inline-block;
				text-align: center;
				box-sizing: border-box;
				width: 25%;
				background-color: burlywood;
				outline: 1px solid red;
			}
			.navbar li a{
				text-decoration: none;
				display: block;
				line-height: 1.75em;
				padding: 1em;
			}
		</style>
	</head>
	<body>
		<nav class="navbar">
			<ul>
				<li><a href="#">home</a></li>
				<li><a href="#">spaceship</a></li>
				<li><a href="#">planets</a></li>
				<li><a href="#">star</a></li>
			</ul>
		</nav>
	</body>
</html>

本来预期的效果是四个li标签，同排显示，结果却出现以下情况
使用多个li标签产生空白间隙解决方法
查了之后才发现，是因为HTML源代码中的换行符被渲染成了空白符，再加上每个li标签给定了25%宽度，导致了“折行”。

解决办法

直接把所有li标签放在一行，即不需要换行
<li><a href="#">home</a></li><li><a href="#">spaceship</a></li><li><a href="#">planets</a></li>
但是这种情况少的还好，多了的话无疑不太友好影响观看性使用性
把包含元素的发font-size设置为0，从而让每个空格宽度为0，再重新给每一项设置大小

			.navbar ul{
				list-style: none;
				padding: 0;
				background-color: aquamarine;
				font-size: 0;
			}
			.navbar li{
				display: inline-block;
				text-align: center;
				box-sizing: border-box;
				width: 25%;
				background-color: burlywood;
				outline: 1px solid red;
				font-size: 19px;
			}

使用多个li标签产生空白间隙解决方法

直接对ul元素使用表格显示模式，将其中的每一项设置为表格单元

			.navbar ul{
				list-style: none;
				padding: 0;
				background-color: aquamarine;
				width: 100%;
				display: table;
				table-layout: fixed;
			}
			.navbar li{
				display: table-cell;
				text-align: center;
				box-sizing: border-box;
				width: 25%;
				background-color: burlywood;
				outline: 1px solid red;
			}

同理可得，那些多个img之间产生的空隙也可以用这种方法解决

使用多个li标签产生空白间隙解决方法

相关推荐