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;
}
当快速地从一个按钮切换到另一个按钮时,您会注意到两个按钮之间实际上有一些间隙。我想摆脱这块地方。有什么想法吗?如果你回答了这个问题,也请解释为什么某个属性会解决这个问题。
我知道使用填充和边距是可以调整的,但缩放时结果可能会失真。请指出一个稳定的解决问题的方法。
谢谢
发布于 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;
}
发布于 2017-08-17 06:45:52
我认为对于最新的CSS,一个更简洁的解决方案是在菜单上使用display:inline-flex
,在按钮上使用display:flex
,或者在菜单上使用width:100%
:
发布于 2018-07-05 20:58:39
将下面的样式添加到您的按钮。如果需要,将几个按钮中的第一个按钮的页边距设为负值。
按钮{ margin: 0px;
}
https://stackoverflow.com/questions/17365017
复制相似问题