1

ここでの私の最初の投稿、皆さんが助けてくれることを願っています。:)

私は純粋な XHTML の厳密な Web サイトの作成に取り組んでいますが、画像はありませんが、製品は少し詰まっています。ここに示すように表示されるボタンを作成する方法が見つからないようです。

ここに画像の説明を入力

ホバー状態、長方形、現在の場所

<div class="topprodcartadd"><a href="#">Add to Cart</a></div>

次のような小さな CSS クラスを作成しました。

.topprodcartadd {
    width: 190px;
    height: 50px;
    background-color: #000;
    margin: 10px 0px;
    padding:0px 10px 10px 0px;
    float: left;
    text-align: right;
    vertical-align: middle;
}
.topprodcartadd:hover {
    background-color: #00a7e6;
}
.topprodcartadd a {
    text-decoration: none;
    color: #00a7e6;
}
.topprodcartadd a:hover {
    color: #fff;
}

何とかリンクさせたいのですが、XHTML Strict では、次のようにコードをロックすると検証エラーが発生します。

<a href="#"><div class="topprodcartadd">Add to Cart</div></a>

ボタンをそのように表示するために私ができることについて、他のアイデアはありますか?

ありがとう！

4

3 に答える 3

4

アンカーの CSS を次のように変更します。

.topprodcartadd a {
    text-decoration: none;
    color: #00a7e6;
    display:block;
    width: 190px;
    height: 50px;
}

jsFiddle の例

display:blockリンクがdivのすべての部屋を占めるように、幅と高さを追加しました。

于 2012-12-21T21:48:15.977 に答える
1

だから、私があなたの問題を正しく理解したら：

display: block1）親要素をa埋めるように設定できます。

2) XHTML Strict が必要ですか?

于 2012-12-21T21:51:52.017 に答える
-1

単純にマウス カーソルを手に変える必要がある場合はcursor:pointer、DIV のスタイルに追加するだけで、アンカーを使用する必要はありません。

于 2012-12-21T21:51:41.823 に答える