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

问题描述

请查看jsfiddle中的这段代码

HTML:

<div id="菜单"><a href="#" class="buttons">首页</a><a href="#" class="buttons">关于我们</a><a href="#" class="buttons">图片</a><a href="#" class="buttons">联系我们</a>

CSS:

#main{宽度:64em；高度:25em；}#菜单{背景颜色:#00b875；高度:3em；}.纽扣{文字装饰:无；颜色:#ffffff；行高:3em；显示:内联块；左边距:10px；padding-right: 10px;字体系列:快递新；-moz-transition:1s 线性；-ms-transition:1s 线性；-o-transition:1s 线性；-webkit-transition:1s 线性；过渡:1s 线性；}.buttons:悬停{背景色:#0d96d6；}

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

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

谢谢

解决方案

看这个 jsFiddle

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

当您使用 inline-block 时，您的 HTML 标记中的元素之间的空白会导致元素之间出现这种丑陋的内联间隙..

please check out 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;
    }

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.

thanks

解决方案

Look at this jsFiddle

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

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