如何删除按钮之间多余的空间？ [英] how to delete extra space between buttons?

问题描述

请查看这code中的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;
    }

这是一个按钮迅速切换到另一个时，你会发现，其实是有两个按钮之间有一些差距。我想摆脱这种空间。有任何想法吗？如果你回答这个问题，也请解释为什么一定的属性将解决这个问题。

when switching from one button to another very quickly, you'll notice that there is actually some gap in between two buttons. i want to get rid of this space. any ideas? if you do answer the question, please also explain why a certain property will fix this.

我知道，它使用填充和利润率可修改，但其结果很可能在变焦失真。请指出解决问题的一个稳定的方式。

i know that it is tweakable using padding and margin, but the result is likely to get distorted upon zoom. please point out a stable way of solving the problem.

感谢

推荐答案

看看这个 的jsfiddle

Look at this jsFiddle

我已经更新显示：inline-block的; 到显示：块; 上的菜单链接和补充浮动：左他们

I've updated display:inline-block; to display:block; on the menu links and added float:left to them.

当您使用 inline-block的你将不得不引起的元素之间的空白元素之间的这种丑陋的直列差距的 HTML 标记..

When you use inline-block you will have this ugly inline gap between elements caused by the whitespace between the elements in your HTML markup..

这篇关于如何删除按钮之间多余的空间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！