如何填充锚文本和边界之间的空白时，填充已零？

我工作的导航菜单上，并创建了一个包含四个锚标签，如下图所示：如何填充锚文本和边界之间的空白时，填充已零？

<nav> 
<ul> 
     <li><a href="/" class="active">BLOG</a></li> 
     <li><a href="/about/">ABOUT ME</a></li> 
     <li><a href="/portfolio/">PORTFOLIO</a></li> 
     <li><a href="/contact/" class="highlight">CONTACT</a></li> 
    </ul> 
</nav>

我给自己定的10px的顶部边框的每一个环节，我想稳坐上文本的顶部。尽管在所有正确的位置将填充设置为0，但我无法摆脱填充。我试过改变线条高度，但这只是将整个导航部分向上或向下移动到屏幕上，并且不会影响到定位文字和顶部边框之间的间隙。

这里的CSS（不包括CSS重置等，而如果需要，我可以发布，但这些大多是从HTML5BoilerPlate出来。

nav ul { 
     padding-right: 24px; 
     float: right; 
    } 

    nav li { 
     display: inline; 
     font-family: Oswald; 
     font-size: 25px; 
    } 

    nav a { 
     color: #7a7a7a; 
     text-decoration: none; 
     margin-left: 16px; 
    } 

    nav li a { 
     border-top: 10px solid #7a7a7a; 
    } 

    nav a:hover { 
     color: #555555 
    } 

    nav a.active { 
     color: #555555; 
    } 

    nav a.highlight:hover { 
     color: #1f9c66; 
    } 

    a.highlight { 
     color: #29cf86; 
    }

谁能帮助？谢谢。

来源

2012-04-17 jasonbradberry

我想到的一个问题是，文本上方和下方可能总是存在空白以允许特殊字符，所以需要一种解决方法？ – jasonbradberry 2012-04-17 22:50:43

为什么你有独立的'nav a'和'nav li a'选择器？ – 2012-04-17 22:53:03

固定。谢谢:) – jasonbradberry 2012-04-17 23:07:21

你可以翻译锚几个像素达到通过相对定位：

li { 
    display: inline; 
    margin-left: 16px; 
    border-top: 10px solid #7a7a7a; 
} 

a { 
    position: relative; 
    top: -6px; 
}

现场演示：http://jsfiddle.net/XQK9h/

来源

2012-04-17 22:57:23

谢谢，这使锚点很好地移动，但不幸的是也移动了边界。我不想将边框分隔成另一个html元素，因为我希望它自动设置为文本宽度。 – jasonbradberry 2012-04-17 23:00:58

@jasonbradberry你可以在LI元素上应用边框，然后确保它不会比锚点宽... – 2012-04-17 23:03:09

任何想法如何设置LI边界自动与锚点宽度相同？ – jasonbradberry 2012-04-17 23:06:37

我认为它可以帮助你。

<style type="text/css"> 

nav ul { 
    padding-right: 24px; 
    float: right; 
} 

nav div { 
    border-top: 10px solid green; 
    display: block; 
    float: left; 
    font-family: Oswald; 
    font-size: 25px; 
    height: 10px; 
    margin: 10px; 
} 

nav a { 
    color: #7a7a7a; 
    text-decoration: none; 
} 

nav a:hover { 
    color: #555555 
} 

nav a.active { 
    color: #555555; 
} 

nav a.highlight:hover { 
    color: #1f9c66; 
} 

a { 
    position: relative; 
    top: -3px; 
} 
a.highlight { 
    color: #29cf86; 
} 

</style> 

<nav> 
<ul> 
    <div><a href="/" class="active">BLOG</a></div> 
    <div><a href="/about/">ABOUT ME</a></div> 
    <div><a href="/portfodivo/">PORTFOLIO</a></div> 
    <div><a href="/contact/" class="highdivght">CONTACT</a></div> 
</ul> 
</nav>

来源

2012-04-17 23:16:39 Swathi

设置锚浮动这将消除每一个Web浏览器的保证金&填充。

#container li a { 
    float:left; 
}

来源

2012-10-17 02:38:02 image72

如何填充锚文本和边界之间的空白时，填充已零？

回答

相关问题