如何消除两个导航栏项之间的差距？

Question

导航栏中的两个项目之间存在小差距。 这是html，css代码：

＆＃13;

＆＃13;

    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;
        }

＆＃13;

 
  <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>

＆＃13;

＆＃13;

＆＃13;

这是输出。

如果我将margin a标记设置为-1，则会缩小差距。

Answer 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>

Answer 2

你可以使用它，间距是display:inline。有关间距

的详细信息，请查看here

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

如果我理解正确，你必须将每个元素的边距设置为0：

* {
  margin: 0;
 }

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

我把它添加到你的css：

a {
  margin-right: -5px;
}

输出：

Answer 5

这是因为空白。您可以使用许多技术来解决问题。

1. 删除结束li标记之间的空格：

   <ul>
     <li>
     <a href="#">Home</a></li><li>
     <a href="#">Support</a></li><li>
     <a href="#">Contact</a></li>
   </ul>
   

2. 删除结束li代码：

   <ul>
     <li><a href="#">Home</a>
     <li><a href="#">Support</a>
     <li><a href="#">Contact</a>
   </ul>
   

3. 使用注释删除空格：

   <ul>
     <li><a href="#">Home</a></li><!--
     --><li><a href="#">Support</a></li><!--
     --><li><a href="#">Contact</a></li>
   </ul>
   

4. 将font-size:0用于CSS中的ul元素：

   ul { font-size: 0; }
   li { font-size: 16px; }
   

Answer 6

添加空格以隐藏空格......

＆＃13;

＆＃13;

        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;
        }

＆＃13;

 
  <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>

＆＃13;

＆＃13;

＆＃13;

Answer 7

删除空间并重新定义边界定义。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;