我可以删除导航按钮之间的空格,将它们居中设置吗?我已尝试删除inline-block
中的li a
,但我认为这是错误的,我认为问题是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>
答案 0 :(得分:1)
之所以发生这种情况,是因为当使用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%);
}
&#13;
<!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>
&#13;
您还可以删除元素(我不建议)之间的所有空格,换行符和制表符,或者将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
答案 1 :(得分:1)
处理此问题有一个奇怪的小技巧,只需删除<li>
元素中的空格:
<!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>