HTML CSS按钮定位

我有一个头div的4个按钮。我已经把它们全部放在顶部并留在CSS中，所以它们在一行中都是彼此相邻的。没有什么花哨。HTML 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设置。我需要编辑什么？

非常感谢。

来源

2012-12-21 user1880779

您可以显示其他按钮的HTML。我同意你的CSS看起来应该只适用于一个ID为btnhome –

的项目我认为这可能是因为你设置了行高，因此整个DOM被压低。但我们需要确认HTML。个人而言，我只是使用'margin-top：25px' – kennypu

缺少代码是通向黑暗的一面。缺乏代码会导致愤怒......愤怒导致仇恨......仇恨导致痛苦...... – brezanac

如我所料，是的，这是因为wh ole DOM元素被推下来。你有多个选项。你可以把按钮放在不同的div中，并且它们不会互相影响。更简单的解决方案是将:active按钮设置为position:relative;并使用top而不是边距或行高。示例小提琴：http://jsfiddle.net/5CZRP/

来源

2012-12-22 00:10:39 kennypu

你是对的，谢谢！ – user1880779

使用边距而不是行高，然后将浮点数应用于按钮。默认情况下，它们显示为inline-block，所以当一个人被推下时，洞线被推下来。浮动修复了这个：

#header button { 
    float:left; 
}

这里的工作jsfidle。

来源

2012-12-21 23:58:59 nienn

是的，我做到了，同样的事情发生..这就是为什么我试着用lineheight替代首先... – user1880779

编辑我的答案。 – nienn

尝试改变该行高度变化的边距或填充顶部的变化，而不是

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

然后风格，

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

来源

2012-12-21 23:59:32

我试过了，也检查了更新的问题，它还有一个更有价值的线索！ – user1880779

我已经尝试了跨度和你的代码，但没有发生任何事情。然后我尝试了线高度和跨度方式：并且仍然移动了按钮上的所有文本。 '#btnhome span：active {line-height：25px;}' – user1880779

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

来源

2015-04-23 08:56:20

HTML CSS按钮定位

回答

相关问题