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

最新推荐文章于 2024-05-11 04:31:37 发布

faye_yang18

最新推荐文章于 2024-05-11 04:31:37 发布

阅读量1.4w

点赞数 3

文章标签： html css

本文链接：https://blog.csdn.net/faye_yang18/article/details/80585546

版权

今天做了一个水平的导航栏，发现导航栏之间有间隔，于是百度了一下发现这是因为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>

更多解决方案点击这里

faye_yang18

关注

3
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
水平导航栏之间的间隔问题

今天做了一个水平的导航栏，发现导航栏之间有间隔，于是百度了一下发现这是因为inline-block 元素在页面上创建的空格换行符，就像几个字之间的空格，这样的空隙也许会破坏我们的水平导航菜单布局。最后有解决方案首先展示一下导航栏有间隔的代码&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt;...
复制链接

扫一扫