HTML CSS按钮定位

我在页眉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>

此外，这些按钮在标题背景上工作，我相信这与以下设置有关：

#header {
    background-image: url(images/navbar588.png);
    height: 48px;
    width: 588px;
    margin: 2em auto;   
    }

它工作得很好，但唯一的问题是所有其他按钮也会向下移动它们的文本？为什么呢？我不是清楚地说明了我只想使用#btnhome吗？所有的按钮都有完全不同的ID。除边距外，所有按钮都具有相同的CSS设置。我需要编辑什么

---

非常感谢。

使用边距而不是行高，然后对按钮应用浮动。默认情况下，它们显示为

内联块

，因此，当一个压下时，孔线将与他一起压下。Float解决了这个问题：

#header button {
    float:left;
}

---

这是一个操作。

尝试将该行的高度更改改为边距顶部或填充顶部更改

#btnhome:active{
margin-top : 25px;
}

编辑： 您也可以尝试在按钮内添加一个跨距

<div id="header">           
    <button id="btnhome"><span>Home</span></button>          
    <button id="btnabout">About</button>
    <button id="btncontact">Contact</button>
    <button id="btnsup">Help Us</button>           
</div>

---

正如我所预料的，是的，这是因为整个DOM元素被向下推。你有多种选择。您可以将按钮放在单独的div中，并将它们浮动，这样它们就不会相互影响。更简单的解决方案是将

：active

按钮设置为

位置：relative并使用
顶部
代替边距或行高。fiddle示例：
能否显示其他按钮的html。我同意你的CSS看起来应该只适用于ID为BTNHome的项目，我想这可能是因为你设置了行高，所以整个DOM都被压下了。但我们需要查看HTML才能确定。就我个人而言，我只会使用
margintop:25px
缺少代码是通向黑暗面的道路。缺少代码会导致愤怒。。。愤怒导致仇恨。。。仇恨导致痛苦…@SimonMartin对不起，伙计们，我已经为你们更新了更多有趣的代码！不是文本被向下移动，而是整个按钮。因为透明的背景和没有边框，所以看起来是这样。是的，我做了，同样的事情发生了。这就是为什么我在第一个位置尝试了线高度的交替…我已经尝试了，也检查了更新的问题，它还有一个有价值的线索！我试过span和你的代码，但什么也没发生。然后我试着用线条的高度和你的跨度，但按钮上的文字还是在移动#btnhome span:活动{线高度：25px；}'
<div id="header">           
    <button id="btnhome"><span>Home</span></button>          
    <button id="btnabout">About</button>
    <button id="btncontact">Contact</button>
    <button id="btnsup">Help Us</button>           
</div>

#btnhome span:active { padding-top:25px;}

[type=submit]{
    margin-left: 121px;
    margin-top: 19px;
    width: 84px;
    height: 40px;   
    font-size:14px;
    font-weight:700;
}