将列表变成行内块后,列表项之间的间距怎么消除

最新推荐文章于 2023-10-25 20:59:03 发布

凌南风

最新推荐文章于 2023-10-25 20:59:03 发布

阅读量721

点赞数 2

CC 4.0 BY-SA版权

分类专栏： office学习文章标签：列表 html css

本文链接：https://blog.youkuaiyun.com/F_x_i_a_o_l_i_n_g_/article/details/108735541

office学习专栏收录该内容

57 篇文章

订阅专栏

本文探讨了如何解决使用display:inline-block属性时列表项间出现的间距问题，并提供了几种解决方案，包括使用float:left和设置margin-left为负值的方法。

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

将列表变成行内块后,列表项之间的间距怎么消除

原因是display:inline-block;属性产生的间隙。
display:inline-block是让元素在一行显示，但是这些元素在html里面是上下行排列的，所以中间有换行符，于是并排显示就有了换行符带来的空隙。

给元素设置float:left,缺点高度塌陷，要清除浮动。
也可以让margin-left的值为负值，因为行块元素默认应改为0，但是还是有间距，所以用负值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				margin: 0;
				padding: 0;
			}
			li{
				display: inline-block;
				list-style: none;
				height: 30px;
				width: 100px;
				background-color: green;
				text-align: center;
				line-height: 30px;
				border-radius: 5px;
				color: white;
				/* float: left; */
				/* margin-left: -5px; */
			}
		</style>
	</head>
	<body>
		<ul>
			<li>首页</li>
			<li>天猫</li>
			<li>聚划算</li>
			<li>超市</li>
			<li>支付宝</li>
		</ul>
	</body>
</html>