0

このコードはかなり単純で、アクティブなとき（マウスをクリックしたとき）にHTML5のボタン要素のmargin-topを1pxに設定する必要があります。しかし、私が得たのは、めちゃくちゃなレイアウトです。ボタンは、隣り合っている両方のボタンに対してのみ実行する必要があることを実行するからです。このエラーが発生する原因を教えてください。

これはサンプルのHTMLコードです（jsfiddleにリンクすることはできないため）が、jsfiddleへのリンクは一番下にあります

<header id="main_header"> <!-- this is your header with logo, menu, login and get started now buttons -->
    <div id="header_accent"></div> <!-- small accent image, barely seen on top of the page -->
    <div id="header_holder"> <!-- this guy centers the header to the middle of the page's width -->
        <img src="images/logo.png" alt="ssl8.com" id="logo"/> <!-- logo image -->
        <div id="nav_holder"> <!-- positions the navigation and buttons -->
            <nav>
                <ul> <!-- navigation -->
                    <li class="active"><a href="#">prices</a></li>
                    <li><a href="#">features</a></li>
                    <li><a href="#">contact</a></li>
                </ul>
            </nav>
            <button class="login">login</button> <!-- login button -->
            <button class="getStartedNow">Get started now</button> <!-- get started now button -->
        </div>
        <div id="header_shadow"></div> <!-- holds the background shadow for the header (in CSS file) -->
    </div>
</header> <!-- END of header -->

これがjsfiddleです。不足している写真などは無視してください。オレンジ色のボタンをクリックするだけで、私が話していることがわかります。

jsfiddle

ありがとうございました

4

3 に答える 3

1

nav_holderとgetStartedNowクラスをに設定しposition:relative、それを使用top:1pxして1ピクセル下に移動します。それで問題は解決したようです。

button.getStartedNow:active {
  position: relative;
  top: 1px;
}

前の問題はマージンの仕組みが原因だったと思いますが、それについて話すには十分な知識がありません。

loginまた、ボタンを使用してこれを実行し、同じ効果を得ることができます。

于 2013-01-30T16:57:19.547 に答える
1

これが私の解決策ですhttp://jsfiddle.net/burn123/emfwA/16/

私が変更したもの

  1. 両方のボタンに設定されたボタンの、、、、およびセットがありますが、これは冗長ですopacity。すべてのボタンに適用されるように変更しましたbox-shadowtransitionsborder-radius
  2. box-shadowまたはにブラウザプレフィックスは必要ありませんborder-radius
  3. ログインボタンの場合、ログインクラスの前の期間を忘れたため、cssはloginという名前の要素を見つけようとしましたが、これは存在しません
  4. 両方の要素からアクティブ要素とホバーを削除し、汎用要素activeとhover疑似要素を設定しました
  5. 各ボタンに対する相対的な位置を追加
  6. アクティブになると、ボタンには次のプロパティが与えられますtop: 1px
  7. ヘッダーのサイズをに変更しmin-width:100%て、行が完全に横切るようにしました

主な問題は、ボタンが静的な位置に設定されているという事実に起因していました。そのため、のを適用することによりmargin-top、1px全体を上から下にシフトしていました。top相対位置を設定することで、またはなどのプロパティを追加できleft、要素のスペースを同じ位置に保ちながら、要素をその方向に移動します。

于 2013-01-30T17:08:34.313 に答える
0

.getStartedNowクラスを基準にして位置を追加し、アクティブなスニペットを次のように変更します。

button.getStartedNow:active {
 bottom: -1px;
}

ここに実際の例があります：http：//jsfiddle.net/emfwA/17/ .。

于 2013-01-30T17:12:15.163 に答える