<分区>
<分区>
我可以删除导航按钮之间的空格，使它们居中吗？我已经尝试删除 li a 中的 inline-block 但我认为它有问题，我认为是 display: inline-block 问题但我不确定...
有人可以帮助我吗？提前致谢。
nav ul {
text-align: center;
margin: 0px;
padding: 0px;
position: fixed;
width: 100%;
height: auto;
background: #b2bac9;
color: #090a0d; }
nav ul li {
margin: 0px;
padding: 0px;
display: inline; }
nav ul li a {
text-decoration: none;
display: inline-block;
padding: 16px;
text-decoration: none;
color: #fff;
background: red; }
nav ul li a:hover {
background: #949fb4; }
#tit {
position: absolute;
top: 100px;
left: 50%;
transform: translateX(-50%);
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> nav </title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">The Project</a></li>
<li><a href="#">Forum</a></li>
</ul>
</nav>
<h1 id="tit" align="center"> I need to remove the balnk space between red buttons </h1>
</header>
</body>
</html>最佳答案
发生这种情况的原因是，当使用带有 inline-block 的元素时它们的处理方式与文本中的单词相同。然后元素之间的换行符和制表符将算作空格。
要修复它，只需设置 nav ul至 display: table :
nav ul {
display: table;
text-align: center;
margin: 0px;
padding: 0px;
position: fixed;
width: 100%;
height: auto;
background: #b2bac9;
color: #090a0d;
}
nav ul li {
margin: 0px;
padding: 0px;
display: inline;
}
nav ul li a {
text-decoration: none;
display: inline-block;
padding: 16px;
text-decoration: none;
color: #fff;
background: red;
}
nav ul li a:hover {
background: #949fb4;
}
#tit {
position: absolute;
top: 100px;
left: 50%;
transform: translateX(-50%);
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> nav </title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">The Project</a></li>
<li><a href="#">Forum</a></li>
</ul>
</nav>
<h1 id="tit" align="center"> I need to remove the balnk space between red buttons </h1>
</header>
</body>
</html>您还可以删除元素之间的所有空格、换行符和制表符(我不推荐这样做)，或者将 Flexbox 与 justify-content: center 结合使用像这样:
nav ul {
display: flex;
justify-content: center;
margin: 0px;
padding: 0px;
position: fixed;
width: 100%;
height: auto;
background: #b2bac9;
color: #090a0d;
}
您可以阅读更多有关她的信息:CSS-Tricks: Fighting the Space Between Inline Block Elements
关于css - 隐藏导航栏中的空格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41645659/