如何删除按钮之间多余的空格？
如何删除按钮之间多余的空格？
提问于 2013-06-28 20:44:03
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;
}当快速地从一个按钮切换到另一个按钮时，您会注意到两个按钮之间实际上有一些间隙。我想摆脱这块地方。有什么想法吗？如果你回答了这个问题，也请解释为什么某个属性会解决这个问题。
我知道使用填充和边距是可以调整的，但缩放时结果可能会失真。请指出一个稳定的解决问题的方法。
谢谢
回答 4
Stack Overflow用户
发布于 2013-06-28 20:52:11
这就是你的解决方案
.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;
}Stack Overflow用户
发布于 2017-08-17 06:45:52
我认为对于最新的CSS，一个更简洁的解决方案是在菜单上使用display:inline-flex，在按钮上使用display:flex，或者在菜单上使用width:100%：
Stack Overflow用户
发布于 2018-07-05 20:58:39
将下面的样式添加到您的按钮。如果需要，将几个按钮中的第一个按钮的页边距设为负值。
按钮{ margin: 0px; }
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17365017
复制相关文章
相似问题
腾讯云开发者
