时间戳

首页 > 解决方案 > 鼠标点击发生在整个行宽

html - 鼠标点击发生在整个行宽

问题描述

我在行中心放了一个 png 标志。行大小为 1140 像素。我只需要一个可点击的标志。但是，每当我将光标放在该行上时，我发现整行我的意思是 1140px 宽度可以通过链接点击。如何摆脱它。我只需要一个可点击的徽标图像而不是整行。

这是我的代码：

.row {
  max-width: 1140px;
  margin: 0 auto 0 auto;
}

.image-logo {
  margin-top: 100px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 20%;
}
<div class="row">
  <a class="image-logo-click" href="#"><img class="image-logo" src="resources/contents/azuba.png" alt="azuba logo"></a>
</div>

这是我的网站快照

标签： htmlcsscss-grid

解决方案

在徽标上使用 inline-block，块将占用 100% 宽度，而 inline-block 将占用所需的宽度

.row {
  max-width: 1140px;
  margin: 0 auto ;
}

.image-logo {
  margin-top: 100px;
  display:inline-block;
  margin-left: auto;
  margin-right: auto;
  width: 20%;
  border:solid 1px black;
}
<div class="row">
  <a class="image-logo-click" href="#">
  <img class="image-logo" src="resources/contents/azuba.png" alt="abc def"></a>
</div>

推荐阅读