[解決済み] HTML/CSSでdiv全体にhrefリンクを貼りたい
2022-03-10 13:10:06
質問
以下は、私がHTML/CSSで実現しようとしていることです。
高さ、幅の異なる画像がありますが、すべて180x235以下です。そこで、私がやりたいことは
div
で
border
と
vertical-align: middle
をすべて表示します。それはうまくいったのですが、今、どうすれば適切に
div
.
以下は私のコードです。
<div id="parentdivimage" style="position:relative;width:184px;height:235px;border-width:2px;border-color:black;border-style:solid;text-align:center;">
<div id="childdivimage" style="position:absolute;top:50%;height:62px;margin-top:-31px;">
<img src="myimage.jpg" height="62" width="180">
</div>
</div>
なお、ここではコピーペーストを容易にするために、スタイルコードはインラインにしています。
どこかで読んだのですが、単純にコードの上にもう一つ親divを追加して、その中にhrefを行うことができるそうです。しかし、いくつかの調査によると、それは有効なコードではないでしょう。
つまり、もう一度まとめると、div全体(
#parentdivimage
)をhrefリンクにする。
解決方法は?
<ブロッククオート2014年10月6日に更新しました。 aの中にdivを使用することは、HTML5では意味的に正しいことです。
以下のシナリオのどちらかを選択する必要があります。
<a href="http://google.com">
<div>
Hello world
</div>
</a>
これは意味的には正しくありませんが、動作します。
<div style="cursor: pointer;" onclick="window.location='http://google.com';">
Hello world
</div>
というのは意味的には正しいのですが、JSを使うことになります。
<a href="http://google.com">
<span style="display: block;">
Hello world
</span>
</a>
は意味的には正しく、期待通りに動作しますが、もはや div ではありません。
関連
-
[解決済み] 送信ボタンが機能しない
-
[解決済み] Bootstrapのカラム内で画像を中央に配置する方法 [重複]について
-
[解決済み] リンクのように動作するHTMLボタンを作成する方法
-
[解決済み] HTMLのid属性に有効な値は何ですか?
-
[解決済み] How can I set the default value for an HTML <select> element?
-
[解決済み] jQueryを使用してハイパーリンクのhref属性を変更する方法
-
[解決済み] CSSでdivのアスペクト比を維持する
-
[解決済み] CSSコンテンツによるHTMLエンティティの追加
-
[解決済み] CSSだけでリンクを無効化する方法
-
[解決済み】CSSを使用して、すべてのブラウザでdiv要素を垂直方向に中央に配置するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】html文書に縦の空白を挿入するには?
-
[解決済み] このCSSでInline-blockが正しく動作しないのはなぜですか?
-
[解決済み] html : iframeでhtmlのコンテンツが表示されない。
-
[解決済み] CSSでulのインデントを削除する
-
[解決済み] IE=edge,chrome=1というのは今でも有効なのでしょうか?
-
[解決済み] div に斜めのエッジを作成する [重複] 。
-
[解決済み] WebForms UnobtrusiveValidationMode には、'jquery' の ScriptResourceMapping が必要です。jquery という名前の ScriptResourceMapping を追加してください(大文字と小文字を区別します)。
-
[解決済み] デフォルトで空白を選択
-
[解決済み] TD rowspan が機能しない
-
[解決済み] 画像をインラインで表示する方法