Question

CSS出现问题，我可以单击锚点元素而不直接在其上面，而是与其对齐。

我的div中有我的锚标签

<div class="footer">
    <a id="foo" href="foo" target="_blank">
        <p id="foo">foo</p>
    </a>
</div>

我的CSS：

.footer {
    color: rgb(170,170,170);
    position: relative;
    bottom:0px;
 }

#foo {
    color: rgb(170,170,170);
    text-align: center;
}

#foo:hover {
    color:rgb(220,220,220);
}

Answer 1

您的标签已反转。将您的<a>放入内，像这样：

<div class="footer">
  <p id="foo"><a href="foo" target="_blank">foo</a></p>
</div>

也请消除<a>标记中的ID引用。它将从标记继承ID。

Answer 2

我认为问题在于锚链接中的段落标签使用情况。在内联元素内使用块级元素不是一个好习惯。我已经更新了该段落以使其适合您。

<div class="footer"><!-- block element-->
    <a id="foo" href="foo" target="_blank"><!--inline element-->
        <span id="foo">foo</span><!--inline element-->
    </a>
</div>

Answer 3

HTML文件中不能有两个ID。只需像这样删除：

<div class="footer">
    <a id="foo" href="foo" target="_blank">foo</a>
</div>

如果您想在这种情况下将foo居中，也可以通过为元素赋予宽度并将margin设置为auto来实现。

#foo {  
    color:rgb(170,170,170);  
    width: 100%;  
    margin: auto;  
}

Answer 4

标签是块级标签。它们将水平填充其父容器。如果出于某种原因需要使用，请在CSS中将其更改为：

footer {
  text-align: center;
}
.foo {
  display: inline-block;
}

不过，最好的选择是将换成。跨度不是块级，因此您可以对它们进行更多的操作，而不必覆盖浏览器的默认行为。

将鼠标悬停在页面上

4 个答案: