3

ヘッダー div に 4 つのボタンがあります。css の上部と左側のマージンを使用してすべて配置したので、それらはすべて 1 行で隣り合っています。派手なものはありません。

ボタンが押されたときにアクションを実行しようとしています。ボタンのテキストが少し下に移動します。

私は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ボタンを設定して、margin または line-height の代わりにposition:relative;使用することです。topフィドルの例: http://jsfiddle.net/5CZRP/

于 2012-12-22T00:10:39.153 に答える
1

代わりに、その行の高さの変更を 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

line-height の代わりにマージンを使用してから、フロートをボタンに適用します。デフォルトでは として表示されているinline-blockため、1 つが押し下げられると、ホール ラインも一緒に押し下げられます。フロートはこれを修正します：

#header button {
    float:left;
}

これは動作中のjsfidleです。

于 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 に答える