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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/cyp18408251336/article/details/52300344

在写前端的时候经常要用到<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>

我明明设置了margin为0的,可是还是有边距。。。楼主哭了。。。研究一下原来是回车的原因。浏览器将<li>标签之间的空白字符解析了。。。WTF。。。害老子改半天间距

<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
	<li>6</li>
	<li>7</li>
</ul>

但是这样写又不方便看,于是又想了另一种解决办法。

<style>
	*{margin: 0px;padding: 0px;}
	ul{font-size: 0px;}
	li{display: inline;background: red;font-size: 16px;}
</style>
将<ul>中的字体大小设为0,然后在<li>中覆盖字体大小,完美解决问题。

展开阅读全文

没有更多推荐了,返回首页