如何删除按钮之间的额外空间？

Question

请在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标记中元素之间的空白而导致元素之间存在这种丑陋的内联间隙.

Answer 2

HTML中标记之间的任何空格都会折叠为单个空格字符,这就是您有这种差距的原因.

你可以:

• 浮动元素,
• 把源</a>和<a>旁边的和相邻
• 用一font-size: 0招

在这种情况下,我个人会把我所有的东西都浮起来,<a>虽然从你的来源中删除空格会带来最少的警告,唯一的一个就是它更难以阅读.

Answer 3

摆脱空间本身:这可能看起来很乱,但实际上它是你能做的最干净的事情.你用CSS技巧实现的任何东西只是把空间放在那里然后否认它们的存在.相反,你可能想省略它们; 要解决的唯一问题是可读性.

所以让它让它变得可读:

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

再说一遍,我知道它看起来很奇怪,是的,但想一想.这里真正的怪人是HTML本身,没有给你一个明确的方法来做到这一点.认为它是一个特殊的标记!它也可以成为HTML标准的一部分; 从技术上讲,顺便说一句,它是 100%标准,你可以自由使用评论......