0

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

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

任何人都可以帮忙吗？谢谢。

4

3 回答 3

2

设置一个锚点浮动，它将删除每个网络浏览器中的边距和填充。

#container li a {
    float:left;
}
于 2012-10-17T02:38:02.160 回答
1

您可以通过相对定位将锚点向上平移几个像素：

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

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

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

于 2012-04-17T22:57:23.397 回答
0

我认为它对你有帮助。

<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-17T23:16:39.370 回答