昨夜、CSSで次のことが許可されていないと言われました。CSSで矛盾する問題
<a href="index.php"><div class="button">Home</div></a>
.submenu div.button{width:72px; height:20px; float:left; margin:0 20px; font-size:0.9em; font-family:Arial; padding:2px; color:black;}
ボタンの外観を作成して、それ以外の方法でユーザーがクリックできるようにするにはどうすればよいですか？これを行う最善の方法は何ですか？
それはそのまま動作しますが、私はそれが準拠していないと言われています。
CSSは完全に有効ですが、許可されていないのは、インライン要素内にブロックレベル要素を入れ子にすることです。したがって、お客様の場合、の中に<div>を挿入することは違法です。 <div>をそのまま残して、代わりに<a>要素のスタイルを設定し、ブロックレベルの要素のように動作させるにはdisplay: blockと指定します。
<a href="index.php" class="button">Home</a>
.submenu a.button{
display: block;
width: 72px;
height: 20px;
float: left;
margin: 0 20px;
font-size: 0.9em;
font-family: Arial;
padding: 2px;
color: black;
}
このルールに違反すると実際にどのような影響がありますか？ –
結果はあまり実用的ではないかもしれませんが、ほとんどのブラウザはおそらくそのどちらかをうまく処理します。しかし、その動作は仕様では定義されておらず、異なるブラウザでは不均一なレンダリングにつながる可能性があります。それは検証されません。 –
... それとも、ディスプレイを使用することができます：タグウントスタイルのためのブロックタグを...このような
何かが何を達成することができます最小限の騒ぎで欲しい。
<div class="submenu">
<a class="button" href="index.php">Home</a>
</div>
.submenu a.button{
width:72px;
height:20px;
float:left;
margin:0 20px;
font-size:0.9em;
font-family:Arial;
padding:2px;
color:black;
display:block; /*added */
}
アンカーはちょうど.submenu a {}は十分であろう、資格過剰になりますが、あなたは.submenu divの中の他、非スタイルのリンクを持っているしたい場合、これは依存しています。
editまた、提供されたマークアップから実際には分かりませんが、セマンティックマークアップのために順序付けられていないリストを使用することをお勧めします。鉱山は単なる例です
「CSSでは許可されていません」とはどういう意味ですか？ –
彼は 'a'の中の' div'を意味します –
それは私の言いたいことです。 – sark9012