Question

我正在制作导航链接，链接之间存在一些差距。得到了stackoverflow早期问题的一些解决方案，它表示删除锚标记之间的空格，因为某些浏览器会将它们视为换行符。在我的情况下，锚标签之间没有空格。

         <div id="nav">
            <ul>
                <li><a href="link1">Link1</a></li>
                <li><a href="link2">Link2</a></li>
                <li><a href="link3">Link3</a></li>
            </ul>
         </div>

#nav{
  background-color:#000000; 
}


#nav ul {
  height: 50px;
  padding: 0;
  margin: 0;
  text-align:center;
  border:1px solid #fff; 
}

#nav ul li { 
   display: inline-block; 
   height: 50px;
   width: 150px; 
   text-align: center; 
   border-right:1px solid #fff;
   border-left:1px solid #fff;
   list-style: none; 
   font: normal bold 12px/1.2em Arial, Verdana, Helvetica;
   padding: 0;
   margin: 0;
   background-color: #000000;
}


 #nav ul li a{
   padding: 18px 0; 
   text-decoration: none; 
   color: white; 
   display: block;
}

Answer 1

快速解决方案是float: left使用display: inline-block代替#nav ul li。以下是关于如何使用各种方法删除inline-block元素之间的空白区域的完整 article 。

顺便说一句，您现在看到的每个菜单项之间的空白区域是border-right和border-left。

＆＃13;

#nav{
  background-color:#000000; 
}


#nav ul {
  height: 50px;
  padding: 0;
  margin: 0;
  text-align:center;
  border:1px solid #fff; 
}

#nav ul li { 
   float: left; 
   height: 50px;
   width: 150px; 
   text-align: center; 
   border-right:1px solid #fff;
   border-left:1px solid #fff;
   list-style: none; 
   font: normal bold 12px/1.2em Arial, Verdana, Helvetica;
   padding: 0;
   margin: 0;
   background-color: #000000;
}

＆＃13;

<div id="nav">
            <ul>
                <li><a href="link1">Link1</a></li>
                <li><a href="link2">Link2</a></li>
                <li><a href="link3">Link3</a></li>
            </ul>
         </div>

＆＃13;

Answer 2

您在锚标记中没有空格，但在li标记中确实有空格。 li标签是inline-block的标签。您也应该删除这些内容，或者在ul标记上使用font-size: 0;，然后重置为li标记中的正确font-size。

您应该将inline-block元素视为真正的大字符，这样您就可以更轻松地理解它们。

Answer 3

font-size：0应该是答案！。就我而言，我使div包括锚标签。将font-size：0放在div（锚标记之间的间隔）上之后。

删除锚标记之间的空格

3 个答案: