html - 如何删除按钮之间的多余空间？

Question

请查看this code in jsfiddle

HTML:

<div id="main">
    <div id="menu">
        <a href="#" class="buttons">Home</a>
        <a href="#" class="buttons">About Us</a>
        <a href="#" class="buttons">Pictures</a>
        <a href="#" class="buttons">Contact Us</a>
    </div>
</div>

CSS:

#main
{
    width: 64em;
    height: 25em;
}

#menu

    {
        background-color: #00b875;
        height: 3em;
    }

    .buttons
    {
        text-decoration: none;
        color: #ffffff;
        line-height: 3em;
        display: inline-block;
        padding-left: 10px;
        padding-right: 10px;
        font-family: courier new;
        -moz-transition: 1s linear;
        -ms-transition: 1s linear;
        -o-transition: 1s linear;
        -webkit-transition: 1s linear;
        transition: 1s linear;
    }

    .buttons:hover
    {
        background-color: #0d96d6;
    }

当从一个按钮快速切换到另一个按钮时，您会注意到两个按钮之间实际上有一些间隙。我想摆脱这个空间。有任何想法吗？如果您确实回答了这个问题，请同时解释为什么某个属性会解决这个问题。

我知道可以使用填充和边距对其进行调整，但结果可能会在缩放时失真。请指出解决问题的稳定方法。

谢谢

Answer 1

看看这个jsFiddle

我已经将菜单链接上的 display:inline-block; 更新为 display:block; 并添加了 float:left .

当您使用 inline-block 时，由于 HTML 标记中元素之间的空格，您将在元素之间出现这种难看的行内间隙。