Question

我正在尝试将一些图像放到我的网站上，这些图像将作为指向页面另一部分的超链接。问题是，当我使用<a>标签和<img>标签时，<a>标签会在其左侧的<img>处过度延伸，从而使可点击的区域成为不想被点击。我想将<a>标记保持在<img>的范围内。

这是我的代码：（对不起，由于我是新手，所以我不知道如何以其他任何方式发布它）

.firstproject {			
   height: 100px;
   width: 100px;
   background-color: red;
   margin-left: 100px;
}

<p><a class="firstproject" href="https://www.youtube.com/"><img 
class="firstproject" src="front.jpg"></a></p>

希望您能弄清楚！

PS：我使用红色背景，因此该区域将可见，并且可以更好地看到其延伸。 PS2：我使用“ youtube”地址作为链接的示例

Answer 1

我所做的只是删除margin-left: -100px;。我不知道此保证金的原因是什么，但是如果这对您的代码很重要，请告诉我，并且请调整我的遮阳篷。

如果您想将图像向右移动更多，可以使用以下css：

position:relative;
left:25px;

有关更多信息，请参见CSS - Position。

.firstproject {
  background-color: red;
  width:100px;
  height:100px;
}

.Secondproject{
  background-color: red;
  width:100px;
  height:100px;
  position:relative;
  left:50px;
}

<p>
  <a class="firstproject" href="https://www.youtube.com/"><img class="firstproject" src="front.jpg"></a>
</p>

<p>
  <a class="Secondproject" href="https://www.youtube.com/"><img class="firstproject" src="front.jpg"></a>
</p>

Answer 2

这是因为img元素和a上有空白。您可以将a元素的边距更改为200px并将其从img中删除，以得到相同的结果，而不会a越界。

也不需要为a设置宽度和高度。它正在根据内容调整大小。

.firstproject-img {
  height: 100px;
  width: 100px;
  background-color: blue;
}

.firstproject-a {
  background-color: red;
  margin-left: 200px;
}

<p>
  <a class="firstproject-a" href="https://www.youtube.com/">
    <img class="firstproject-img" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
  </a>
</p>

Answer 3

您可以将Customer应用于Customer c = new Customer( /*parameters*/ ); Link link= linkTo(AnyController.class).slash("address").slash(addressId); customer.add(link); //considering you want to add link `http://localhost:8080/api/address/23` and `23 is your addressID`.标记，这将为您带来预期的结果。

要将图像包含在标签中，请将图像display: inline-block设置为a

width

100%

编辑： 要向右推.firstproject { height: 100px; width: 100px; background-color: red; display: inline-block; } .firstproject > img { width: 100%' } p {padding-left: 100px;}，您可以在其父级的左侧添加padding-left

<p><a class="firstproject" href="https://www.youtube.com/"><img 
class="firstproject" src="front.jpg"></a></p>

Answer 4

为了将标签的大小限制为已定义类的范围，我添加了display: block，以确保已应用高度/宽度（display: inline-block也可以使用）。

在下面的链接中，我有两个示例，一个留给您保证金，另一个保留了保证金，因为我不确定您在寻找什么。

https://jsbin.com/gahunohebu/edit?html,css,output

HTML：

<p><a class="firstproject" href="https://www.youtube.com/"><img 
class="firstproject" src="http://via.placeholder.com/350x150"></a></p>

  <p><a class="secondproject" href="https://www.youtube.com/"><img 
class="secondproject" src="http://via.placeholder.com/350x150"></a></p>

CSS：

.firstproject {
  height: 100px;
  width: 100px;
  background-color: red;
  margin-left: 100px;
  display: block;
}

.secondproject {
  height: 100px;
  width: 100px;
  background-color: red;
  display: block;
}

您可以在CSS技巧中了解有关CSS display的更多信息：https://css-tricks.com/almanac/properties/d/display/

链接的区域大于图像

4 个答案: