3

我在标题 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 设置。我需要编辑什么？

非常感谢你。

4

4 回答 4

8

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

于 2012-12-22T00:10:39.153 回答
1

尝试将 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;}
于 2012-12-21T23:59:32.353 回答
0

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

#header button {
    float:left;
}

这是一个有效的jsfiled。

于 2012-12-21T23:58:59.130 回答
-1 
[type=submit]{
    margin-left: 121px;
    margin-top: 19px;
    width: 84px;
    height: 40px;   
    font-size:14px;
    font-weight:700;
}
于 2015-04-23T08:56:20.277 回答