Question

我有五个链接彼此相邻，虽然它们设置为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;
}

感谢您的回答。我在标签之间添加了注释，并且它有效。

Answer 1

这是标签之间的空白区域。 Check out this article你可以做些什么来打击它。

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

但最好的方法是使用一个构建步骤来缩小HTML并自动删除所有HTML。

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

Answer 3

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

你可以在一行上写下所有<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>

什么占用网页空间？

3 个答案: