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

源代码

	
		
		
		
	
	
		

			

				
home
				
spaceship
				
planets
				
star
			
		
	

本来预期的效果是四个li标签，同排显示，结果却出现以下情况

查了之后才发现，是因为HTML源代码中的换行符被渲染成了空白符，再加上每个li标签给定了25%宽度，导致了“折行”。

解决办法

1. 直接把所有li标签放在一行，即不需要换行
   

2. home
3. spaceship
4. planets

但是这种情况少的还好，多了的话无疑不太友好影响观看性使用性

5. 把包含元素的发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;
			}

3. 直接对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之间产生的空隙也可以用这种方法解决