晚上好，
我的解釋可能不是很清楚，所以我已經編輯了！
我有一張圖片（如果你點擊它會帶你到一個網站）。我還需要的是該影像下方的文本）也可以鏈接到同一網站。我不希望它們成為 2 個單獨的鏈接，它們需要以某種方式加入。
一個很好的例子是 BBC 新聞，您可以在其中單擊影像或文本，它會將您轉移到相關的 URL。
這是我的 HTML：
<div class = "image1">
<a href =
"https://wwww.this isamade uplink">
<img src="2.jpeg" width="150" height="200" alt="Made up image name"
>Test to display
</a>
</div>
這是我的 CSS：
.image1 {
position: absolute;
left: 10px;
top: 200px;
display: flex;
flex-direction: column;
}
uj5u.com熱心網友回復：
您可以使用text-indent,display和float。
displayfora，所以它可以包裹一個浮動元素并應用text-indentfloat對于img，因此它不會對 做出反應text-indent，只會關注文本和行內非浮動元素。
現場示例：
.image1 a {
display: inline-block;
text-indent: -100vw;/* hudge value sending text and inline tags far outside the screen */
}
.image1 a img {
float: left;
}<div class="image1">
<a href="#">
<img src="https://dummyimage.com/150x200" width="150" height="200" alt="Made up image name">Testing
</a>
</div>uj5u.com熱心網友回復：
我之前的答案是“正確”的方法。但是，如果您想為它們提供相同的 url 并且只使用一個，您可以簡單地將a tag標題和影像都包裹起來。這將鏈接到#URL占位符中的任何 URL 。
.image1 {
position: absolute;
left: 10px;
top: 0px;
display: flex;
flex-direction: column;
}
.title-name {
font-weight: bold;
position: absolute;
top: 200px;
left: 60px;
}<div>
<a href="#URL"><img src="https://www.mooreseal.com/wp-content/uploads/2013/11/dummy-image-square.jpg" width="150" height="200" alt="alt-text" title="title on hover" class="image1">
<h3 class="title-name">Title</h3>
</a>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/322913.html