css inline-block方式实现水平导航栏 解决空白问题

本文探讨了解决inline-block元素间空白问题的方法。通过设置父元素font-size为0或删除源代码中的空白来解决这一布局难题,并介绍了每种方案的优缺点。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

ul.mynav{
	list-style-type: none;
	/*所有字符包含空白符设置字体为0*/
	/* font-size: 0; */
}


ul.mynav li{
	/*设置inline-block*/
	display: inline-block;
	background-color: #008B8B;
	line-height: 40px;
	width: 140px;
	text-align: center;
	/*设置li中字体*/
	/* font-size: 16px;
	margin-right: 1px; */
}

ul.mynav li:hover,
ul.mynav li:active{
	background-color: #87CEEB;
}


div代码

<ul class="mynav">
			<li>菜单1</li>
			<li>菜单2</li>
			<li>菜单3</li>
			<li>菜单4</li>
			<li>菜单5</li>
			<li>菜单6</li>
		</ul>

效果



问题

我们可以看到元素间有空白,这是li与li之间的空白节点。在西方排版中,行内以空格作为单词分界,在解析时,对空白字符(空格、换行、制表符)进行压缩,所以就留有1个空白,所以这是行内(inline)问题(inline-block本身当作inline,内部当作block处理),只有行内才会对空白字符压缩。知道了空白的原因,自然而然就想到了以下两种解决方案


解决方案

1、因为空白也算字符,所以可以设置父元素的font-size:0,重新设置子元素的font-size。缺点,子元素需要重新设置字体,耦合度大。

ul.mynav{
	list-style-type: none;
	/*所有字符包含空白符设置字体为0*/
	font-size: 0; 
}


ul.mynav li{
	/*设置inline-block*/
	display: inline-block;
	background-color: #008B8B;
	line-height: 40px;
	width: 140px;
	text-align: center;
	/*设置li中字体*/
	font-size: 16px;
	margin-right: 1px;
}



2、删除源代码中的空白。缺点,可读性差。

<ul class="mynav">
			<li>菜单1
			</li><li>菜单2
			</li><li>菜单3
			</li><li>菜单4
			</li><li>菜单5
			</li><li>菜单6</li>
		</ul>


此处,我采用的第一种解决方案,效果如下



后记

现在的css4规范已经有white-space-collapse,如果浏览器实现了,那解决这个问题就简单了。


参考资料

有哪些好方法能处理 display: inline-block 元素之间出现的空格?

inline-block 前世今生



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值