Html 如何删除按钮之间的额外空间？

请退房

HTML:

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

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

谢谢你看这个

我已经更新了

display:inline块至<代码>显示：块并向其添加
float:left

使用
inline block
时，元素之间会出现这种难看的内联间隙，这是由
HTML
标记中元素之间的空格造成的。
（JSFiddle）

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

你可以：


让你的元素向左浮动
将
和
放在源代码或
使用
字体大小：0
技巧

在这种情况下，我个人会将我所有的
都放在左边，尽管从源代码中删除空白的警告最少，唯一的一个是它更难阅读。
这是你的解决方案


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

让我们让它可读：

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



再说一次，我知道这看起来很奇怪，是的，但是想想看。这里真正奇怪的是HTML本身，没有给你一个明确的方法来做这件事。认为这是一个特殊的标记！它也可以是HTML标准的一部分；从技术上讲，顺便说一句，它是100%标准的，您可以自由使用评论…
我认为最新的CSS解决方案是在菜单上使用
display:inline flex
，在按钮上使用
display:flex
，在菜单上使用
width:100%
：

2017年2017年：使用
显示：内联flex
将它们包装在一个元素中，并使用类似
flex:0 1 auto
的内容来调整内部按钮：

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


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

钮扣{
margin:0px；
}
如果使用引导，可以通过在div中用class=“btn group”将按钮组合在一起。
v3.3.7的示例：

视觉上可能是，也可能不是你想要的。左右两端都有圆角，按钮之间有直线。
HTML中标记之间的任何空白都会折叠成一个空格字符，这就是为什么会有这种间隙。您可以将元素向左浮动，将
和
放在源代码中相邻的位置，或者使用
字体大小：0
trickah，这样做有效。谢谢我基本上是把标签放在一起的。@Bojangles你的评论比贴出的答案更好；）@谢谢。我已经把它作为一个答案贴了出来，现在你还没有在这里修复任何东西；空间静止remains@amin你是对的，但是我认为显示：块

更有意义。嘿，如果我想把按钮移到页面的中心怎么办？边距实际上为每个按钮提供了一个边距，所以又有间隙。我只想在水平面上移动按钮的位置-没有间隙，按钮居中。这是通过在

#菜单中使用一个居中的包装器来完成的。如果这对您有效，请告诉我。嘿，谢谢您的回答。虽然你的回答是正确的，但我从尤塔姆·奥马尔那里学到了更多。我希望你不介意我选择他作为最佳答案。再次感谢你。不用担心，我的信息不是很丰富，只是列出了一些不同的想法让人们开始。字体大小0很好！
#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;
}

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

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

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