首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何删除按钮之间多余的空格?

如何删除按钮之间多余的空格?
EN

Stack Overflow用户
提问于 2013-06-28 20:44:03
回答 4查看 42.7K关注 0票数 21

请查看this code in jsfiddle

HTML:

代码语言:javascript
复制
<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:

代码语言:javascript
复制
#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;
    }

当快速地从一个按钮切换到另一个按钮时,您会注意到两个按钮之间实际上有一些间隙。我想摆脱这块地方。有什么想法吗?如果你回答了这个问题,也请解释为什么某个属性会解决这个问题。

我知道使用填充和边距是可以调整的,但缩放时结果可能会失真。请指出一个稳定的解决问题的方法。

谢谢

EN

回答 4

Stack Overflow用户

发布于 2013-06-28 20:52:11

这就是你的解决方案

http://jsfiddle.net/NPqSr/7/

代码语言:javascript
复制
.buttons
{
    text-decoration: none;
    color: #ffffff;
    line-height: 3em;
    display: inline-block;
    padding-left: 10px;
    float:left;
    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;
}
票数 1
EN

Stack Overflow用户

发布于 2017-08-17 06:45:52

我认为对于最新的CSS,一个更简洁的解决方案是在菜单上使用display:inline-flex,在按钮上使用display:flex,或者在菜单上使用width:100%

http://jsfiddle.net/NPqSr/212/

票数 0
EN

Stack Overflow用户

发布于 2018-07-05 20:58:39

将下面的样式添加到您的按钮。如果需要,将几个按钮中的第一个按钮的页边距设为负值。

按钮{ margin: 0px; }

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/17365017

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档