我在标题div中有4个按钮.我已经将它们全部放在css的顶部和左边使用边距,所以它们在一行中彼此相邻.没有什么花哨.
现在,当按下按钮时,我正在尝试执行操作,按钮文本向下移动一点.
我在CSS中使用此代码：
#btnhome:active{
line-height : 25px;
}
HTML：
<div id="header">
<button id="btnhome">Home</button>
<button id="btnabout">About</button>
<button id="btncontact">Contact</button>
<button id="btnsup">Help Us</button>
</div>
按钮CSS示例：
#btnhome {
margin-left: 121px;
margin-top: 1px;
width: 84px;
height: 45px;
background: transparent;
border: none;
color: white;
font-size:14px;
font-weight:700;
}
这些按钮也适用于标题背景,我确信它与这些设置有关：
#header {
background-image: url(images/navbar588.png);
height: 48px;
width: 588px;
margin: 2em auto;
}
它运作良好,但唯一的问题是所有其他按钮也移动文本？这是为什么？我不清楚我只想使用#btnhome吗？所有按钮都有完全不同的ID.除边距外,所有按钮都具有相同的CSS设置.我需要编辑什么？
非常感谢你.
解决方法
正如我所料,是的,这是因为整个DOM元素被推倒了.你有多种选择.您可以将按钮放在单独的div中,然后浮动它们以使它们不会相互影响.更简单的解决方案是将：active按钮设置为position：relative;并使用top而不是margin或line-height.示例小提琴：
http://jsfiddle.net/5CZRP/
