Question

我有一个Div在另一个里面。子Div是一个链接启动javascript动画（通过动画css属性）和我放入包装器的原因是因为我想让孩子居中并浮动。所以孩子Div做居中，而父母做浮动。原因是您无法使用margin:0 auto;属性执行float:。

现在我的问题是，当我在子Div周围放置一个链接时，父Div也会链接！这一刻真让我感到困惑。这种情况发生在Chrome和Firefox中，但奇怪的是它在IE中没有发生！有人知道什么是错的吗？

父级是#eastereggwrapper，孩子是#eastereggbutton。以下是代码片段，我的HTML：

<div id="eastereggwrapper">
  <a href="" class="secret" >
    <div id="eastereggbutton" >
      Don't Click Me
    </div>
  </a>
</div>

和我的CSS：

#eastereggwrapper {
    background-color: black;
    bottom: 0px;
    width: 100%;
    position: relative;
    float:left;
}

#eastereggbutton {
    margin:0 auto;
    width:10%; 
    height:50px;
    background-color:green;
    color: black;
    font-size:18px;
    font-family:Tahoma, Geneva, sans-serif;
    text-align:center;
}

P.S。秘密类没有定义，它用于Javascript代码。

Answer 1

尝试以下两种方法之一：

将<a>放在第二个div中
将子div替换为<a>标记：

<强> HTML

<div id="eastereggwrapper">
  <a href="" class="secret" id="eastereggbutton">
      Don't Click Me
  </a>
</div>

<强> CSS

#eastereggbutton {
    display: block;
    margin:0 auto;
    width:10%; 
    height:50px;
    background-color:green;
    color: black;
    font-size:18px;
    font-family:Tahoma, Geneva, sans-serif;
    text-align:center;
}

Answer 2

添加

#eastereggwrapper > a {
    width:10%;
    display: block;
    margin:auto;
}

到您的CSS并删除

margin:0 auto;
width:10%;

来自#eastereggbutton

的属性

为什么父Div会被链接？

2 个答案: