HTML CSS 按钮定位答案

【问题标题】：HTML CSS Button PositioningHTML CSS 按钮定位
【发布时间】：2015-04-23 17:18:26
【问题描述】：

我在标题 div 中有 4 个按钮。我已将它们全部放置在 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 设置。我需要编辑什么？

非常感谢。

【问题讨论】：

你能显示其他按钮的html吗？我同意你的 CSS 看起来应该只适用于 ID 为 btnhome 的项目
我认为这可能是因为您正在设置行高，因此整个 DOM 被推下。但我们需要查看 HTML 才能确定。就个人而言，我只会使用margin-top: 25px
缺乏代码是通往黑暗面的道路。缺乏代码导致愤怒……愤怒导致仇恨……仇恨导致痛苦……
@SimonMartin 对不起各位，我已经为你们更新了更多更有趣的代码！
向下移动的不是文字，而是整个按钮。由于透明背景且没有边框，看起来就是这样。

标签： html css button position pressed

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

我试过了，也检查了更新的问题，它有一个更有价值的线索！
我已尝试使用 span 和您的代码，但没有任何反应。然后我尝试了行高和跨度方式：按钮中的所有文本仍然移动。 '#btnhome span:active { line-height:25px;}'

【解决方案3】：

使用边距而不是行高，然后将浮动应用于按钮。默认情况下，它们显示为inline-block，因此当一个人被推下时，洞线被他推下。浮动解决了这个问题：

#header button {
    float:left;
}

这是一个有效的jsfidle。

【讨论】：

是的，我做到了，同样的事情发生了..这就是为什么我首先尝试使用 lineheight...

【解决方案4】：

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

【讨论】：