为什么我可以单击其文本元素之外的链接？

Question

我正在建立一个论坛，并且我有一个可以在其文本之外单击的链接，我该如何撤消它？ 我还有一个标签内的图像，可以在其图像之外单击，我也想撤消它。 我试过 - 位置：相对；但它没有用。

---

这是图片的 HTML 代码。

<div class="nav-list">
       <a class="home_A"href="Home.php">
          <img class="homeIcon" src="photos/icon.png">
       </a>
</div>

图片的CSS

.homeIcon{
    width: 200px;
    display:block;
    margin:auto;
    margin: 0 auto;
}

---

<a> 链接的 CSS

.signinForm a{
margin: auto;
display:block;
text-align:center;
margin-top: 7px;
color: #006db6;
font-size: 20px;
}

<a> 链接的 HTML

<form method="POST" class="signinForm">
<ul>
    <li> <h1 class="signinH1">sign in</h1></li>
    <li> <input type="text" placeholder="User name"name="username_login"class="username" value="<?php if(isset($_POST['username_login'])){echo $_POST['username_login'];}?>" required></li>
    <li> <input type="password" placeholder="Password" name="password_login" class="password" value="<?php  if(isset($_POST['password_login'])){echo $_POST['password_login'];}?>" required></li>
    <li> <input type="submit" value="Log in"class="signinbutton"></li>
    <li><a href="signUp.php">Sign up</a></li>
</ul>

</form>

谢谢大家。

Answer 1

这可能与 <a> 标签和/或 <img> 标签的 CSS 样式有关。

我的猜测是，类似以下的内容可能会解决您的问题

.homeIcon {
  display: inline-block;
}

Answer 2

尝试类似：

img.homeIcon {
  display: inline-block;
}

div.home_A {
align-content:center;
margin: 0 auto;
text-align: center; // Not mandatory but useful
}

Answer 3

当然，指定display: inline-block，也可以在<img> 上使用object-fit:contain，并将<a> 的line-height: 设置为1 到1.25，具体取决于您的字体设置方式，但值的影响很小。

:root {
  font: 1ch/1 'Segoe UI'
}

body {
  font-size: 2ch;
}

a {
  font-size: 2.5rem;
  line-height: 1.15;
}

a,
img {
  display: inline-block;
}

img {
  object-fit: contain;
  width: 3rem;
  height: 3rem;
  margin-bottom: -3px;
}

<div class='frame'>
  <a class="zOne" href="https://stackoverflow.com/users/2813224/zer00ne">
..::Zer00ne::..
  <img src='https://i.ibb.co/Kx33pSY/01.jpg'></a>
</div>

Answer 4

<!--HTML_CODE-->
<div class="nav-list">
   <a class="home_A"href="Home.php">
      <img class="homeIcon" src="photos/icon.png">
   </a>
</div>


<form method="POST" class="signinForm">
<ul>
<li> <h1 class="signinH1">sign in</h1></li>
<li> <input type="text" placeholder="User 
name"name="username_login"class="username" value="<?php 
if(isset($_POST['username_login'])){echo $_POST['username_login'];}?>" required> 
</li>
<li> <input type="password" placeholder="Password" name="password_login" 
class="password" value="<?php  if(isset($_POST['password_login'])){echo 
$_POST['password_login'];}?>" required></li>
<li> <input type="submit" value="Log in"class="signinbutton"></li>
<div class="signUp-block">
<li><a href="signUp.php">Sign up</a></li></div>
</ul>

</form>


/*CSS_CODE*/
.homeIcon{
width: 200px;
display:block;
margin:auto;
margin: 0 auto;
}
.signUp-block{
display: flex;
flex-direction: row;
justify-content: center;
}
.signinForm a{

margin: auto;
display:inline-block;

text-align:center;
margin-top: 7px;
color: #006db6;
font-size: 20px;
}
.homeIcon {
display: inline-block;
}