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

how to delete extra space between buttons?

提问by amin

please check out this code in jsfiddle

请在 jsfiddle 中查看此代码

HTML:

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:

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

谢谢

回答by Yotam Omer

Look at this jsFiddle

看看这个jsFiddle

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

我已经更新display:inline-block;到display:block;菜单链接并添加float:left到它们中。

When you use inline-blockyou will have this ugly inline gap between elements caused by the whitespace between the elements in your HTMLmarkup..

当您使用时，inline-block您将在元素之间产生这种丑陋的内联间隙，这是由HTML标记中元素之间的空格引起的。

回答by Bojangles

Any whitespace between tags in HTML is collapsed into a single space character, which is why you have that gap.

HTML 中标签之间的任何空白都会折叠成一个空格字符，这就是为什么会有这个空白。

You could:

你可以：

• Float your elements left,
• Put the </a>and <a>next to each other in the source or
• Use a font-size: 0trick

• 向左浮动你的元素，
• 将</a>和放在<a>源中彼此相邻或
• 使用font-size: 0技巧

In this case, personally I'd float all my <a>s left although removing whitespace from your source comes with the fewest caveats, the only one being that it's more difficult to read.

在这种情况下，我个人会浮动我所有<a>的左边，尽管从您的源中删除空格带来的警告最少，唯一的警告是它更难以阅读。

回答by dkellner

Get rid of the spaces themselves:this may look messy but actually it's the cleanest thing you can do. Anything you achieve with CSS tricks is just putting the spaces there and then denying their existence. Instead, you might want to omit them; the only problem to solve is readability.

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

So let's make it readable:

所以让我们让它可读：

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

Again, I know it seems weird, yes, but think about it. The real weirdo here is HTML itself, not giving you a clear way to do this. Consider it a special markup! It could as well be part of the HTML standard; technically, btw, it is100% standard, you are free to use comments...

再说一次，我知道这看起来很奇怪，是的，但请考虑一下。这里真正的怪人是 HTML 本身，没有给你一个明确的方法来做到这一点。把它当作一个特殊的标记！它也可能是 HTML 标准的一部分；从技术上讲，顺便说一句，这是100% 标准，您可以自由使用评论...

回答by sangram parmar

here is your solution

这是你的解决方案

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

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

.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;
}

回答by Falguni Panchal

Try this(JSFiddle)

试试这个（JSFiddle）

CSS

CSS

#main {

    height: 25em;
}

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

.buttons {
    text-decoration: none;
    color: #ffffff;
    line-height: 3em;
    display: inline-block;
    padding-left:5px;
    padding-right:5px;
    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;
}

回答by adrianTNT

I think with latest CSS possibilities a cleaner solution is to use display:inline-flexon menu and display:flexon buttons, and maybe width:100%on menu:

我认为使用最新的 CSS 可能性，一个更简洁的解决方案是display:inline-flex在菜单和display:flex按钮上使用，也许width:100%在菜单上使用：

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

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

回答by Mateo Tibaquira

It's 2017: wrap them inside an element with display: inline-flexand flex the inner buttons with something like flex: 0 1 auto:

现在是2017 年：将它们包裹在一个元素中，display: inline-flex并使用以下内容弯曲内部按钮flex: 0 1 auto：

<div style="display: inline-flex">
    <button style="flex: 0 1 auto">...</button>

回答by VickyCool

Add the below style to your button. If required, make the margin negative for first of the few buttons.

将以下样式添加到您的按钮。如果需要，将几个按钮中的第一个的边距设为负数。

button{ margin: 0px;}

按钮{ margin: 0px;}

回答by Ben Kao

If using bootstrap, can group buttons together by wrapping in div with class="btn-group". Example for v3.3.7: https://getbootstrap.com/docs/3.3/components/#btn-groups-single

如果使用引导程序，可以通过用 class="btn-group" 包裹在 div 中来将按钮组合在一起。v3.3.7 示例：https://getbootstrap.com/docs/3.3/components/#btn-groups-single

Visually might or might not be what you want. Has rounded corners on left and right ends and straight line between buttons.

视觉上可能是也可能不是你想要的。左右两端有圆角，按钮之间有直线。