关于标签之间因为换行等问题造成的空白间距问题处理

在编写HTML文件时,我们就会遇到,类似这样的问题

	CSS文件:
    <style> ul{ list-style: none; } li{ width: 100px; height: 50px; line-height: 50px; background: hotpink; display: inline-block; text-align: center; } </style>

  

      HTML结构:
    <ul> <li>菜单</li> <li>菜单</li> <li>菜单</li> <li>菜单</li> <li>菜单</li> <li>菜单</li> </ul>

  

我们发现,li标签之间会存在空白格,这是由于,标签换行造成的,那么怎么去掉这些空白格呢?

有两个解决方案:

方案一:去掉li标签之间的换行

处理后的效果

 

 

方案二:给父级标签设置font-size:0px;给当前标签设置font-size:14px;

处理后的效果

<style>
		ul{
			list-style: none;
			font-size: 0px;
		}
		li{
			width: 100px;
			height: 50px;
			line-height: 50px;
			background: hotpink;
			display: inline-block;
			text-align: center;
			font-size: 14px;
		}
	</style>
</head>
<body>
	<ul>
		<li>菜单</li>
		<li>菜单</li>
		<li>菜单</li>
		<li>菜单</li>
		<li>菜单</li>
		<li>菜单</li>
	</ul>
</body>

  

 

posted @ 2017-02-26 09:12  豆浆油条123  阅读(965)  评论(0编辑  收藏  举报