Question

我正在制作一组导航链接。每当他们的：悬停样式被激活时，很明显链接周围有一个小的（可能是2px？）边距。我尝试在userLogin()样式上使用margin:0;将其删除，但没有成功。我还尝试在父a上设置margin:0;，但又一次，没有运气。

我已将代码包含在下面的代码段中以说明问题。有谁知道造成这种情况的原因，反过来又如何解决？

谢谢！

＆＃13;

div

＆＃13;

/* Animations */
div#top > div#nav-container a:hover {
  color:#f7902b;
  background-color:#fff;
}

/* Regular CSS */
div#top {
  background-color:#333;
  padding-top:10px;
  padding-bottom:10px;
}
div#top > div#nav-container {
  text-align:center;
}
div#top > div#nav-container a {
  text-decoration:none;
  color:#fff;

  padding:10px 20px;

  transition:color 0.25s,background-color 0.5s;
}

＆＃13;

Answer 1

菜单之间的间距不是margin，而是内联元素的宽度，在这种情况下是空格。

该问题的可能解决方案是：[为解决方案＃1附加工作样本]

（使用CSS）将容器块的font-size设置为0px，并设置font-size标记的a以显示内容。 [见下面的代码段]
（修改HTML）在行之间进行注释以避免内联空间（在我看来这不是一个合适的解决方案）
使用float（你不想要的）

用于实施解决方案＃1

div#top > div#nav-container {
  text-align:center;
  font-size:0px;
}
div#top > div#nav-container a{
  font-size:15px;
}

用于实施解决方案＃2 （未提供）

<div id="nav-container"><!--
        --><a href="#">Breaking</a><!--
        --><a href="#">Politics</a><!--
        --><a href="#">Military</a><!--
        --><a href="#">Economy</a><!--
        --><a href="#">Development</a><!--
--></div>

/* Animations */
div#top > div#nav-container a:hover {
  color:#f7902b;
  background-color:#fff;
}

/* Regular CSS */
div#top {
  background-color:#333;
  padding-top:10px;
  padding-bottom:10px;
}
div#top > div#nav-container {
  text-align:center;
  font-size:0px;
}
div#top > div#nav-container a{
  font-size:15px;
}
div#top > div#nav-container a {
  text-decoration:none;
  color:#fff;

  padding:10px 20px;

  transition:color 0.25s,background-color 0.5s;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />

    <link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="assets/bootstrap/css/custom/nav.css" rel="stylesheet" />
    <!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
  </head>
  <body>
    <div id="top" class="col-md-12">
      <div id="logo-container" style="margin:auto;width:200px;">
        <img src="assets/images/logo-banner.png" style="width:100%;" />
      </div>
      <hr style="margin:10px 0 10px 0;border-color:#444;" />
      <div id="nav-container">
        <a href="#">Breaking</a>
        <a href="#">Politics</a>
        <a href="#">Military</a>
        <a href="#">Economy</a>
        <a href="#">Development</a>
      </div>
    </div>
  </body>
</html>

Answer 2

它不是它的空白区域。链接是内联元素，您看到的空间只是空格。你可以做两件事：

1）在你的html

中有这样的东西

<a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a>

但不建议这样做。

2）为菜单使用常见的ul和li结构

3）制作div#top > div#nav-container a {display:inline-block}

Answer 3

不确定这是否正确，但是有效。

div#nav-container a {
    margin-right: -4px;
}

Answer 4

如果您在悬停时谈论链接周围的1px差距，只需调整padding以填充空格，如下所示：

div#top > div#nav-container a {
    text-decoration: none;
    color: #fff;
    padding: 11px 20px;
    transition: color 0.25s,background-color 0.5s;
}

如下图所示

填充链接周围出现边距

4 个答案: