Question

我正在使用导航菜单，并创建了一个包含四个锚标签，如下所示：

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

有人可以帮忙吗？感谢。

Answer 1

设置锚点浮动，这将删除边距＆amp;在每个网络浏览器中填充。

#container li a {
    float:left;
}

Answer 2

您可以通过相对定位将锚点翻译几个像素：

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

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

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

Answer 3

我觉得它对你很有帮助。

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

当填充已经为零时，如何删除锚文本和边框之间的空格？

3 个答案: