Question

所以我目前正在学习如何使用html和CSS，我决定用一个非常小的项目来测试自己。当我完成后，我遇到了一个我不知道如何解决的小问题这是我的html
（注意：我正在使用jsfiddle.net这样的东西！DOCTYPE html和head不是一个问题）

div {
  width: 300px;
  background-color: rgb(255, 145, 145);
  border: 1px solid black;
  border-radius: 20px;
  font-size: 1.5em;
  margin: auto;
  padding: 2px
}
div:hover {
  background-color: rgb(255, 100, 100)
}
div:active {
  background-color: rgb(255, 75, 75);
}
a {
  text-decoration: none;
  color: rgb(145, 230, 255);
  font-family: serif, cursive;
  font-weight: bold;
}
span {
  color: red;
  font-family: Comic Sans MS;
}

<a href="#" target="_blank">
  <div>
    <p>
      When you click on it, this button will take you to<span>Codecademy</span>, where I learned how to make things like this.
    </p>
  </div>
</a>

问题是我的div的边距是可点击的，这正是我不想要的。还请记住我是初学者，请尽可能简单地解释为什么会这样。

Answer 1

不要将边距和宽度放在div上，而是将其放在元素上并将其设置为阻止。

a {margin: 0px auto; width: 300px; display: block;}

Answer 2

您应该为<a>设置样式而不是<div>，并将其转换为block。

a {
  display:block;
  width: 300px;
  background-color: rgb(255, 145, 145);
  border: 1px solid black;
  border-radius: 20px;
  font-size: 1.5em;
  margin: auto;
  padding: 2px
}
a:hover {
  background-color: rgb(255, 100, 100)
}
div:active {
  background-color: rgb(255, 75, 75);
}
a {
  text-decoration: none;
  color: rgb(145, 230, 255);
  font-family: serif, cursive;
  font-weight: bold;
}
span {
  color: red;
  font-family: Comic Sans MS;
}

<a href="#" target="_blank">
  <div>
    <p>
      When you click on it, this button will take you to<span>Codecademy</span>, where I learned how to make things like this.
    </p>
  </div>
</a>

Answer 3

您可以为容器链接分配display: inline-block;或float: left;属性，以便获取其子元素的大小：

a {
  float: left;
}

div {
  width: 300px;
  background-color: rgb(255, 145, 145);
  border: 1px solid black;
  border-radius: 20px;
  font-size: 1.5em;
  margin: auto;
  padding: 2px
}
div:hover {
  background-color: rgb(255, 100, 100)
}
div:active {
  background-color: rgb(255, 75, 75);
}
a {
  margin:100px;
  float:left;
  text-decoration: none;
  color: rgb(145, 230, 255);
  font-family: serif, cursive;
  font-weight: bold;
}
span {
  color: red;
  font-family: Comic Sans MS;
}

<a href="https://www.codecademy.com/learn/web" target="_blank">
  <div>
    <p>
      When you click on it, this button will take you to<span>Codecademy</span>, where I learned how to make things like this.
    </p>
  </div>
</a>

如何使我的div的边距不可点击？

3 个答案: