HTML CSS按钮定位 [英] HTML CSS Button Positioning

问题描述

我在标题div中有4个按钮。我把它们全部使用边距顶部和左边在css中，所以他们都在一行中彼此相邻。没有什么奇怪。

I have 4 buttons in a header div. I have placed them all using margins top and left in css so they are all next to each other in one line. Nothing fancy.

现在我试图做一个动作，当按钮被按下按钮文本向下移动一点。

Now I'm trying to do an action when the button is pressed the button text moves down a little bit.

我在CSS中使用这个代码：

I'm using this code in 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;
}

同样，这些按钮在标题背景上工作，与这些设置有关：

Also those buttons work on a header background, I'm sure it has something to do with these settings :

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

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

It works well but the only problem is that the all other buttons also move their text down? Why Is that? Aren't I clearly clarifying that I want to use #btnhome only? All the buttons have completely different ID's. All buttons have the same CSS settings except the margins. What do I need to edit?

非常感谢。

推荐答案

p>如我所料，是的，因为整个DOM元素被下推。您有多个选项。您可以将按钮放在单独的div中， float 使它们不会相互影响。更简单的解决方案是将：active 按钮设置为 position：relative; 并使用 top 而不是margin或line-height。示例fiddle： http://jsfiddle.net/5CZRP/

as I expected, yeah, it's because the whole DOM element is being pushed down. You have multiple options. You can put the buttons in separate divs, and float them so that they don't affect each other. the simpler solution is to just set the :active button to position:relative; and use top instead of margin or line-height. example fiddle: http://jsfiddle.net/5CZRP/

这篇关于HTML CSS按钮定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！