Question

我正在尝试弥合导航菜单之间的差距，以便完全覆盖红色背景。

<nav>
    <a class="current_page" href="index.php"><span class="glyphicon glyphicon-home"></span> Home </a>
    <a href="blog.php"><span class="glyphicon glyphicon-pencil"></span> Blog</a>
    <a href="photography.php"><span class="glyphicon glyphicon-camera"></span> Photos </a>
    <a href="videos.php"><span class="glyphicon glyphicon-facetime-video"></span> videos</a>
    <a href="feedback.php"> Feedback </a>
    <a href="about.php"> About </a>
</nav>

我的css是： -

nav{
    background-color:red;
    padding:0px;
    margin:0px;
}

a{
  margin:0px;
  padding:5px;
  font-family:arial;
  font-size:16px;
  font-weight:bold;
  display:inline-block;
  background:#6a97d5;
}

https://jsfiddle.net/z4gLqp61/3/

Answer 1

更改保证金CSS，如：

 a{
    margin:0px -5px;
    padding:5px;
    font-family:arial;
    font-size:16px;
    font-weight:bold;
    display:inline-block;
    background:#6a97d5;
}

Answer 2

你只需要添加

a { margin-right:-4px; }

因为无论何时写display:inline-block，都需要额外的margin-right:4px

所以，你需要通过添加CSS代码来删除它。

如何消除导航链接之间的差距

2 个答案: