删除锚标记之间的空格

我正在处理导航链接，链接之间存在一些空白。从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; 
}

来源

2014-10-18 Raman

快速解决方案将使用float: left而不是display: inline-block为#nav ul li。这里有一个完整的article关于如何使用各种方法去除inline-block元素之间的空白。

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

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

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

来源

2014-10-18 23:55:11

您不必在锚标签空格但你必须在李标签。 li标签是inline-block。您也应该删除这些标签，或者在ul标签上使用font-size: 0;，然后在li标签中重置为正确的font-size。

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

来源

2014-10-18 23:52:23 Zenorbi

删除锚标记之间的空格

回答

相关问题