【问题标题】：How to remove the gap between two navigation bar items?如何消除两个导航栏项之间的间隙？
【发布时间】：2017-06-02 05:52:47
【问题描述】：
导航栏中的两个项目之间有一个小间隙。
这是html、css代码：
body{
margin: 0px;
font-family: sans-serif;
}
ul{
padding: 15px 0px;
background: grey;
list-style-type: none;
}
li{
display: inline;
}
a{
border: 1px solid black;
color: white;
text-decoration: none;
padding: 15px 15px;
}
a:hover{
background: grey;
color: black;
}
a:active{
background: white;
}
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Support</a></li>
</ul>
这是输出。
如果我将a 的margin 标签设置为-1，差距就会缩小。
【问题讨论】：
标签：
html
css
navigationbar
【解决方案1】：
您可以将display: table; 添加到您的<ul> 元素。这将删除空间。
body{
margin: 0px;
font-family: sans-serif;
}
ul{
display: table;
padding: 15px 0px;
background: grey;
list-style-type: none;
}
li{
display: inline;
}
a{
border: 1px solid black;
color: white;
text-decoration: none;
padding: 15px 15px;
}
a:hover{
background: grey;
color: black;
}
a:active{
background: white;
}
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Support</a></li>
</ul>
【解决方案2】：
你可以用这个，间距是因为display:inline。有关间距的更多信息，请查看here
body {
margin: 0px;
font-family: sans-serif;
}
ul {
padding: 15px 0px;
background: grey;
list-style-type: none;
}
li {
display:inline-block;
}
a {
border: 1px solid black;
color: white;
text-decoration: none;
padding: 15px 15px;
}
a:hover {
background: grey;
color: black;
}
a:active {
background: white;
}
<ul>
<li><a href="#">Home</a></li><!--
--><li><a href="#">Support</a></li><!--
--><li><a href="#">Contact</a></li><!--
--><li><a href="#">Support</a></li>
</ul>
【解决方案3】：
如果我理解正确，您必须将每个元素的边距设置为 0：
* {
margin: 0;
}
* {
margin: 0;
}
body {
font-family: sans-serif;
}
ul {
padding: 15px 0px;
background: grey;
list-style-type: none;
}
li {
display:inline-block;
}
a {
border: 1px solid black;
color: white;
text-decoration: none;
padding: 15px 15px;
}
a:hover {
background: grey;
color: black;
}
a:active {
background: white;
}
<ul>
<li><a href="#">Home</a></li><!--
--><li><a href="#">Support</a></li><!--
--><li><a href="#">Contact</a></li><!--
--><li><a href="#">Support</a></li>
</ul>
【解决方案4】：
这是因为空格。您可以使用多种技术来解决此问题。
-
删除关闭和打开li标签之间的空格：
<ul>
<li>
<a href="#">Home</a></li><li>
<a href="#">Support</a></li><li>
<a href="#">Contact</a></li>
</ul>
-
删除结束li标签：
<ul>
<li><a href="#">Home</a>
<li><a href="#">Support</a>
<li><a href="#">Contact</a>
</ul>
-
使用 cmets 去除空格：
<ul>
<li><a href="#">Home</a></li><!--
--><li><a href="#">Support</a></li><!--
--><li><a href="#">Contact</a></li>
</ul>
-
将font-size:0 用于CSS 中的ul 元素：
ul { font-size: 0; }
li { font-size: 16px; }
【解决方案5】：
添加空格以隐藏空格...
body{
margin: 0px;
font-family: sans-serif;
}
ul{
padding: 15px 0px;
background: grey;
list-style-type: none;
}
li{
display: inline;
}
a{
border: 1px solid black;
color: white;
text-decoration: none;
padding: 15px 15px;
}
a:hover{
background: grey;
color: black;
}
a:active{
background: white;
}
/* Add this */
li:after {
content: ' ';
font-size: 0;
}
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Support</a></li>
</ul>
【解决方案6】：
删除空格并重新定义边框定义。
body {
margin: 0px;
font-family: sans-serif;
}
ul {
padding: 15px 0px;
background: grey;
list-style-type: none;
display: inline-block;
}
li {
border-top: 1px solid black;
border-bottom: 1px solid black;
border-right: 1px solid black;
float: left;
padding: 15px;
text-align: center;
min-width: 60px;
}
li:first-child {
border-left: 1px solid black;
}
a {
color: white;
text-decoration: none;
display: inline-block;
}
a:hover {
background: grey;
color: black;
}
a:active {
background: white;
}
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Support</a></li>
</ul>
【解决方案7】：
我将此添加到您的 css 中：
a {
margin-right: -5px;
}
输出：