HTML CSS 按钮定位
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13998677/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML CSS Button Positioning
提问by user1880779
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.
我在标题 div 中有 4 个按钮。我已将它们全部使用边距顶部和左侧边距放置在 css 中，因此它们都在一行中彼此相邻。没有什么花哨。
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 :
我在 CSS 中使用此代码：
#btnhome:active{
line-height : 25px;
}
HTML :
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 :
按钮 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;
}
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?
它运行良好，但唯一的问题是所有其他按钮也将其文本向下移动？这是为什么？我不是明确说明我只想使用 #btnhome 吗？所有按钮都有完全不同的 ID。除了边距外，所有按钮都具有相同的 CSS 设置。我需要编辑什么？
Thank you very much.
非常感谢。
回答by kennypu
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 floatthem so that they don't affect each other. the simpler solution is to just set the :activebutton to position:relative;and use topinstead of margin or line-height. example fiddle: http://jsfiddle.net/5CZRP/
正如我所料，是的，这是因为整个 DOM 元素都被压低了。您有多种选择。您可以将按钮放在单独的 div 中，float这样它们就不会相互影响。更简单的解决方案是将:active按钮设置为position:relative;并使用top而不是边距或行高。示例小提琴：http: //jsfiddle.net/5CZRP/
回答by Simon Martin
try changing that line-height change to a margin-top or padding-top change instead
尝试将该行高更改更改为边距顶部或填充顶部更改
#btnhome:active{
margin-top : 25px;
}
Edit: You could also try adding a span inside the button
编辑：您也可以尝试在按钮内添加跨度
<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>
Then style that
然后样式
#btnhome span:active { padding-top:25px;}
回答by nienn
Use margins instead of line-height and then apply float to the buttons. By default they are displaying as inline-block, so when one is pushed down the hole line is pushed down with him. Float fixes this:
使用边距代替行高，然后将浮动应用于按钮。默认情况下，它们显示为inline-block，因此当一个人被推下时，洞线也会与他一起推下。浮动解决了这个问题：
#header button {
float:left;
}
Here's a working jsfidle.
这是一个有效的jsfidle。
回答by Balaji Narendra
[type=submit]{
margin-left: 121px;
margin-top: 19px;
width: 84px;
height: 40px;
font-size:14px;
font-weight:700;
}
