how to delete extra space between buttons?

问题:

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

回答1:

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

回答2:

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

You could:

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

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.

回答3:

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.

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 is 100% standard, you are free to use comments...

回答4:

here is your solution

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

回答5:

Try this(JSFiddle)

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

回答6:

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

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

回答7:

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

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

回答8:

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

button{ margin: 0px; }

回答9:

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

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