0

好吧，我有这段相当简单的代码，当它处于活动状态（鼠标点击它）时，应该将 HTML 5 按钮元素的 margin-top 设置为 1px。但是我得到的是一个混乱的布局，因为按钮只做了它应该做的事情，它只为两个紧挨着的按钮做它。你能告诉我是什么导致这个错误发生吗？

这是一个示例 HTML 代码（因为我不能只链接到 jsfiddle），但是到 jsfiddle 的链接就在底部

<header id="main_header"> <!-- this is your header with logo, menu, login and get started now buttons -->
    <div id="header_accent"></div> <!-- small accent image, barely seen on top of the page -->
    <div id="header_holder"> <!-- this guy centers the header to the middle of the page's width -->
        <img src="images/logo.png" alt="ssl8.com" id="logo"/> <!-- logo image -->
        <div id="nav_holder"> <!-- positions the navigation and buttons -->
            <nav>
                <ul> <!-- navigation -->
                    <li class="active"><a href="#">prices</a></li>
                    <li><a href="#">features</a></li>
                    <li><a href="#">contact</a></li>
                </ul>
            </nav>
            <button class="login">login</button> <!-- login button -->
            <button class="getStartedNow">Get started now</button> <!-- get started now button -->
        </div>
        <div id="header_shadow"></div> <!-- holds the background shadow for the header (in CSS file) -->
    </div>
</header> <!-- END of header -->

这是jsfiddle。忽略丢失的图片等，只需单击橙色按钮，您就会看到我在说什么。

jsfiddle

谢谢

4

3 回答 3

1

我会将nav_holderandgetStartedNow类设置为position:relative，然后top:1px将其向下移动一个像素。这似乎可以解决问题。

button.getStartedNow:active {
  position: relative;
  top: 1px;
}

我认为之前的问题是由边距的工作方式引起的，但我不太了解这个问题。

您还希望使用login按钮执行此操作以在此处获得相同的效果。

于 2013-01-30T16:57:19.547 回答
1

这是我的解决方案http://jsfiddle.net/burn123/emfwA/16/

我改变了什么

  1. 您为两个按钮上设置的按钮设置了 、 、 和 ，这是opacity多余box-shadow的transitions。border-radius我改变了它，使它适用于所有按钮
  2. box-shadow或不需要浏览器前缀border-radius
  3. 对于您的登录按钮，您忘记了登录类之前的句点，因此 css 试图找到一个名为 login 的元素，该元素不存在
  4. 从两个元素中删除活动和悬停并设置通用active和hover伪元素
  5. 添加了相对于每个按钮的位置
  6. 激活时，按钮将被赋予一个属性top: 1px
  7. 将标题的大小更改为，min-width:100%以便该行将一直穿过

主要问题在于您的按钮设置在静态位置，因此通过应用margin-topof 1px，您将整个顶部向下移动。通过设置相对位置，您可以添加诸如top或之类的属性left，它将沿该方向移动元素，同时仍将元素的空间保持在相同位置

于 2013-01-30T17:08:34.313 回答
0

添加 position: 相对于 .getStartedNow 类，并将活动片段更改为：

button.getStartedNow:active {
 bottom: -1px;
}

这是一个活生生的例子：http: //jsfiddle.net/emfwA/17/ ..

于 2013-01-30T17:12:15.163 回答