1

私は HTML と CSS で忙しく、これに行き詰まっています。:hover および :active オプションを使用してボタンを作成し、ページの中央に配置しました。このボタンをクリックすると、Web サイトに移動する必要があります。

私のHTMLは：

<div>
<a href="website"><div id="button">Text</div></a>
</div>

CSS は次のとおりです。

body, html {
  height: 100%;
}
a {
    text-decoration: none;
}
#button {
    text-transform: uppercase;
    font-size: 18px;
    text-align: center;
    padding: 1em 0.5em 0.8em;
    background-color: white;
    font-family: Myriad Pro, Source Sans Pro, Helvetica, Arial, sans-serif;
    color: #ff4700;
    cursor: pointer;
    width: 150px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #ff4700;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
    -webkit-transition: all .1s ease;
    -moz-transition: all .1s ease;
    -ms-transition: all .1s ease;
    -o-transition: all .1s ease;
    transition: all .1s ease;
}

#button:hover {
   background-color: #ff4700;
   color: white;
   border: 1px solid white; 
}

#button:active {
    background-color: #cc3900;
    }

問題は、幅 150px でページの中央にあるボタン自体だけでなく、ページの幅全体がボタンの高さでクリック可能であるという事実にあります。

div が混同されており、他のフォーマットと優先順位が必要だと思いますが、よくわかりません。ご協力いただきありがとうございます！

PS StackOverflowで初めて、フォーマットが間違っていたらごめんなさい。編集: PPS 皆さん、反応をありがとうございます。いくつかの方法が機能しましたが、これが最も簡単に組み込むことができました。

<div>
<a href="website" style="display:block" id="button">Text</a>
</div>

もう一度、ありがとう！

4

6 に答える 6

1

これは役に立ちますか。

<div>
<a href="website" style="display:block" id="button">Text</a>
</div>

リンクをブロックで囲むのではなく、リンクをブロックにします。

于 2013-11-06T21:44:19.600 に答える
0 
<div>
<div id="button"><a href="website">Text</a></div>
</div>
于 2013-11-06T21:45:03.470 に答える
0 
<div>
<a href="website" id="button">TEXT</a>
</div>

次に、css を使用して div を中央に配置します。これは役立つはずです！

于 2013-11-06T21:45:18.067 に答える