0

我有五个彼此相邻的链接，虽然它们设置为 20% 宽度，但最后一个链接到下一行。但是，当我将其设置为 19.5% 时，就可以了。我确保将正文、链接和所有包含元素的填充和边距设置为 0。虽然这不是一个主要问题，但任何有关此的信息将不胜感激。

这是html：

<div id="top">
    <img src="someimage" />
    <nav id="nav">
        <a href="link1.html">LINK1</a>
        <a href="link2.html">LINK2</a>
        <a href="link3.html">LINK3</a>
        <a href="link4.html">LINK4</a>
        <a href="link5.html">LINK5</a>
    </nav>
</div>

和CSS：

body {
    background-color: white;
    margin: 0;
    padding: 0;
}
#top {
    background-color: #AAAAAA;
    height: 50px;
}
#nav > a {
    display:inline-block;
    height: 25px;
    width: 19.5%;
    background-color: #AAAAAA;
    margin: 0;
    padding: 0;
    text-align: center;
    text-decoration: none;
    color: #222222;
}

感谢您的回答。我在标签之间添加了注释，它可以工作。

4

3 回答 3

2

这是标签之间的空白。查看这篇文章，了解您可以采取哪些措施来对抗它。

我的建议是简单地将 HTML 全部放在一行上。它更难阅读，但呈现你想要的。

不过，最好的方法是有一个构建步骤来缩小您的 HTML 并自动摆脱所有这些。

于 2013-08-07T13:09:12.213 回答
2

inline-block将换行符转换为空格时存在问题，这可能会破坏您的布局，我建议您改用浮点数：

#nav{
    overflow:hidden;
}

#nav > a {
    float: left;
    height: 25px;
    width: 19.5%;
    background-color: #AAAAAA;
    margin: 0;
    padding: 0;
    text-align: center;
    text-decoration: none;
    color: #222222;
}
于 2013-08-07T13:15:51.367 回答
1

每个链接之间的换行符转换为一个空格。这是正在添加的宽度。

您可以将所有<a>标签写在一行上，使它们浮动或在它们之间添加注释，如下所示：

<nav id="nav">
    <a href="link1.html">LINK1</a><!--
    --><a href="link2.html">LINK2</a><!--
    --><a href="link3.html">LINK3</a><!--
    --><a href="link4.html">LINK4</a><!--
    --><a href="link5.html">LINK5</a>
</nav>
于 2013-08-07T13:10:31.247 回答