html - 点击一个按钮让右边的按钮向左移动(点击效果是让按钮变小)+Jade

Question

我有一个效果，当点击一个按钮时，它的尺寸会减小。 但是，当单击一个按钮时，右侧的按钮不会停留在初始位置，而是向左移动。

HTML 看起来像这样(它使用的是 Jade，Jade 到 HTML 的转换器不工作，很抱歉)。

div.container
  nav.navbar.navbar-default(role='navigation')
    .container-fluid
      .navbar-header
        button.navbar-toggle(id="menu_button", type='button', data-toggle='collapse', data-target='#bs-example-navbar-collapse-1')
      #bs-example-navbar-collapse-1.collapse.navbar-collapse
        ul.nav.navbar-nav
          li.dropdown
            a.dropdown-toggle(href='#', data-toggle='dropdown')
              img(src='/images/farming_base.png', width='130', class='dropdown_buttons')
          li.dropdown
            a.dropdown-toggle(href='#', data-toggle='dropdown')
              img(src='/images/trophy_base.png', width='130' class='dropdown_buttons')

CSS:

.dropdown_buttons:active {
    width: 100px;
}

您可以在 clashofclans.tv 的操作中看到它(2 个橙色按钮)

我该如何解决这个问题？

谢谢

Answer 1

您可以为元素添加边距，使其仍占用相同数量的空间。

.dropdown_buttons:active {
    width: 100px;
    margin:0 15px;
}