水平导航栏之间的间隔问题

今天做了一个水平的导航栏,发现导航栏之间有间隔,于是百度了一下发现这是因为inline-block 元素在页面上创建的空格换行符,就像几个字之间的空格,这样的空隙也许会破坏我们的水平导航菜单布局。

最后有解决方案

首先展示一下导航栏有间隔的代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/lbt.css" />
		<base target="_blank">
	</head>
	<body>
		<ul>
  			<li><a href="#">Home</a></li>
  			<li><a href="#">Pizza</a></li>
  			<li><a href="https://music.163.com/">Music</a></li>
  			<li><a href="#">Wombats</a></li>
  			<li><a href="#">Finland</a></li>
		</ul>
	</body>
</html>

css部分

body,html {
	margin: 0;
	font-family: sans-serif;
}
ul {
	padding: 0;
	width: 100%;
}
li {
	display: inline;
}
a {
	outline: none;
	text-decoration: none;
	display: inline-block;
	width: 19.5%;
	margin-right: 0.625%;
	text-align: center;
	line-height: 3;
	color: black;
	background: rgb(249,229,229);
}

ul:last-child a{
	margin-right: 0;
}

得到的效果


下面就贴上解决方案了

<ul>
  			<li>
  				<a href="#">Home</a></li><li><a href="#">Pizza</a></li><li><a href="https://music.163.com/">Music</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland</a></li>
		</ul>
更多解决方案点击这里

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