如何删除按钮之间的额外空间？-howtodeleteextraspacebetweenbuttons?

24  

Look at this jsFiddle

看看这个jsFiddle

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

我已经更新了display：inline-block;显示：块;在菜单链接上添加了float：left给他们。

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

使用内联块时，HTML标记中的元素之间的空格会导致元素之间存在这种丑陋的内联间隙。

13  

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 and next to each other in the source or
• 将和彼此相邻放在源或中
• Use a font-size: 0 trick
• 使用font-size：0技巧

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

    

        HomeAbout UsPicturesContact Us
    

I'm not saying you should do it like this - but it is an option, and technically it's a lot less of a hack than floating left; this is the closest thing to not having the space at all (unless you write all links in a row which just looks ugly and makes it a pain to insert/delete/reorder).

我并不是说你应该这样做 - 但这是一个选择，从技术上来说，它不是一个黑客而是漂浮左边;这是最接近没有空间的东西（除非你把所有链接写成一行看起来很难看并且插入/删除/重新排序很麻烦）。

Again, I know it seems weird but the real weirdo here is HTML itself, not giving you a clear way to do this.

再一次，我知道它看起来很奇怪，但真正的古怪是HTML本身，没有给你一个明确的方法来做到这一点。

3  

You might want to read this article about the subject by Chris Couier

您可能想阅读Chris Couier关于这个主题的这篇文章

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

1  

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

0  

Try this(JSFiddle)

试试这个（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;
}

0  

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:

我认为最新的CSS可能性更清晰的解决方案是使用display：inline-flex菜单和显示：flex on buttons，也许宽度：100％菜单：

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

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

0  

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

它是2017年：将它们包装在一个带显示的元素内：inline-flex并用flex之类的方式弯曲内部按钮：0 1 auto：

    ...

0  

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

将以下样式添加到按钮。如果需要，请为几个按钮中的第一个按钮设置负值。

button{ margin: 0px; }

按钮{margin：0px; }