li标签水平布局时莫名其妙的间距

最新推荐文章于 2024-07-08 15:52:01 发布

泠泉石上

最新推荐文章于 2024-07-08 15:52:01 发布

阅读量4k

点赞数 1

分类专栏： HTML和CSS布局中的奇葩问题文章标签：布局标签前端

本文链接：https://blog.csdn.net/cyp18408251336/article/details/52300344

版权

在前端开发中，使用li标签进行水平布局时遇到一个棘手的问题，即即便设置了margin为0，仍然存在间距。原因在于浏览器将li标签间的空白字符解析导致。解决方法包括删除空格或使用CSS的list-style: none和display: inline-block来消除间距。

摘要由CSDN通过智能技术生成

在写前端的时候经常要用到<li>标签水平平铺。今天聊一聊出现的一个莫名其妙的边距问题和解决办法。啥也不说，直接代码

<style>
<span style="white-space:pre">	</span>*{margin: 0px;padding: 0px;}
	li{display: inline;background: red;}
</style>

<ul>
<span style="white-space:pre">	</span><li>1</li>
<span style="white-space:pre">	</span><li>2</li>
<span style="white-space:pre">	</span><li>3</li>
<span style="white-space:pre">	</span><li>4</li>
<span style="white-space:pre">	</span><li>5</li>
<span style="white-space:pre">	</span><li>6</li>
<span style="white-space:pre">	</span><li>7</li>
</ul>