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

源代码




	
		
		
		
	
	
		
	

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

解决办法

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

  2. home
  3. spaceship
  4. planets

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

  6. 把包含元素的发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标签产生空白间隙解决方法_第2张图片

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

你可能感兴趣的:(前端学习)