0

我在另一个里面有一个 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;
}

PS 未定义秘密类，它用于 Javascript 代码。

4

2 回答 2

1

尝试以下两种方法之一：

  1. 放置<a>第二个div的内部
  2. <a>用标签替换子 div ：

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;
}
于 2013-03-19T22:51:32.573 回答
1

只需添加

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

到您的 CSS 并删除

margin:0 auto;
width:10%;

来自#eastereggbutton 的属性

于 2013-03-19T22:58:10.187 回答