HTML CSS按钮定位

Question

我在标题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设置.我需要编辑什么？

非常感谢你.

Answer 1

正如我所料,是的,这是因为整个DOM元素被推倒了.你有多种选择.您可以将按钮放在单独的div中,float以便它们不会相互影响.更简单的解决方案是将:active按钮设置为position:relative;并使用top而不是边距或线高.示例小提琴:http://jsfiddle.net/5CZRP/