css - HTML 5 按钮，在事件状态下放置一个 1px 的按钮，搞砸了，影响超过 1 个按钮，如何解决？

Question

好吧，我有这段代码，它相当简单，应该在 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

谢谢

Answer 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 并设置了一个通用的 active 和 hover 伪元素
5. 添加相对于每个按钮的位置
6. 激活时，按钮将被赋予 top: 1px
属性
7. 将标题的大小更改为 min-width:100% 以便该行将一直穿过

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