web-dev-qa-db-ja.com

HTMLCSSボタンの配置

ヘッダー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設定は同じです。何を編集する必要がありますか？

どうもありがとうございました。

htmlcssbuttonpositionpressed
3
user1880779

予想通り、ええ、それはDOM要素全体が押し下げられているためです。複数のオプションがあります。ボタンを別々のdivに配置し、互いに影響を与えないようにfloatすることができます。より簡単な解決策は、:activeボタンをposition:relative;に設定し、マージンや行の高さの代わりにtopを使用することです。フィドルの例： http://jsfiddle.net/5CZRP/

7
kennypu

代わりに、その行の高さの変更をマージントップまたはパディングトップの変更に変更してみてください

#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;}
1
Simon Martin
[type=submit]{
    margin-left: 121px;
    margin-top: 19px;
    width: 84px;
    height: 40px;   
    font-size:14px;
    font-weight:700;
}
0
Balaji Narendra

行の高さの代わりに余白を使用してから、ボタンにフロートを適用します。デフォルトでは、それらはinline-blockとして表示されるため、1つを押し下げると、穴の線が彼と一緒に押し下げられます。 Floatはこれを修正します：

#header button {
    float:left;
}

これが機能しています jsfidle 。

0
nienn