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

导航栏中的两个项目之间有一个小差距。这是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>

这是输出。

如果我将margin的a标记设置为-1，则间距会减小。

来源

2017-06-02 JavaBanana

您可以将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>

来源

2017-06-02 05:55:56

您可以使用此，间距是因为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>

来源

2017-06-02 05:59:40 Swellar

如果我理解你正确，你必须每一个元素的边距设置为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>

来源

2017-06-02 06:03:12 Wernerson

我这个添加到你的CSS：

a { 
    margin-right: -5px; 
}

输出：

output screenshot

来源

2017-06-02 06:03:53

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

关闭和开启之间移除空间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>

使用注释删除空间：

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

在CSS中ul要素使用font-size:0：

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

来源

2017-06-02 06:10:01

添加空间隐藏起来的空间...

 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>

来源

2017-06-02 06:13:47 Alohci

删除空间，重新定义边界的定义。

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>

来源

2017-06-02 06:24:09 Gerard

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

回答

相关问题