HTML CSS按钮定位

Question

我在headerdiv中有4个按钮。我已经在css中使用margin top和left来放置它们，因此它们都在一行中彼此相邻。没有什么幻想。

现在我想做一个动作当按钮被按下时按钮文本向下移动了一点

我在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/

Answer 2

尝试将line-height改为margin-top或padding-top

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

编辑:您还可以尝试在按钮

中添加span

<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;}

Answer 3

使用边距而不是行高，然后为按钮应用浮动。默认情况下，它们显示为inline-block，所以当一个被推下去时，孔线也被推下去。Float修复这个:

#header button {
    float:left;
}

Answer 4

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