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

问题描述

我在标题 div 中有 4 个按钮.我已经将它们全部放置在 css 中的顶部和左侧边距中，因此它们都在一行中彼此相邻.没什么好看的.

现在我正在尝试在按下按钮时执行一个操作，按钮文本会向下移动一点.

我在 CSS 中使用此代码:

 #btnhome:active{行高:25px；}

HTML:

<button id="btnhome">主页</button><button id="btnabout">关于</button><button id="btncontact">联系人</button><button id="btnsup">帮助我们</button>

按钮 CSS 示例:

#btnhome {左边距:121px；边距顶部:1px；宽度:84px；高度:45px；背景:透明；边界:无；白颜色;字体大小:14px；字体粗细:700；}

这些按钮也适用于标题背景，我确定它与这些设置有关:

#header {背景图片:网址(图片/navbar588.png)；高度:48px；宽度:588px；保证金:2em 自动；}

它运行良好，但唯一的问题是所有其他按钮也将其文本向下移动?这是为什么?我不是明确说明我只想使用#btnhome 吗?所有按钮都有完全不同的 ID.除了边距外，所有按钮都具有相同的 CSS 设置.我需要编辑什么?

非常感谢.

解决方案

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

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.

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>

Button CSS example :

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

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?

Thank you very much.

解决方案

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屋！