Question

我想创建一个花哨的按钮，看起来当有人点击它时它会被点击。不幸的是，我已经注意到我的Mac（Chrome和Firefox最新浏览器），当我点击“保存”按钮时，包含表单的整个div（由下面的“profile”标识）向下移动几个像素我点击“保存”按钮。我创建了这个JSFiddle来演示 - https://jsfiddle.net/05qxeaok/2/。我有

<div id="profile" class="row">
  <div class="col-md-6 col-md-offset-3">
    <form class="edit_user" id="edit_user_2" action="/users/2" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="_method" value="put" /><input type="hidden" name="authenticity_token" value="zNwIQCm3caY33TTc1cs3j2yCVI8VVCWhNHR7RsUuY/d0hqYjeMTCtS85diQv6nKGcX8PbzXTZYHQqCVthMWh1A==" />

    <h2>Tell Us More ...</h2>

      <div class="profileField"> 
      Height
      <input size="2" class="form-control" type="text" value="2" name="user[height_feet]" id="user_height_feet" /> ft. 

      <input size="2" class="form-control" type="text" value="1" name="user[height_inches]" id="user_height_inches" /> in. 
      </div>

      <div class="profileField">
      <label for="user_weight">Weight</label>
      <input size="3" class="form-control" type="text" name="user[weight]" id="user_weight" /> lbs.
      </div>

      <div class="profileField">
    <input type="submit" name="commit" value="Save" method="put" class="button" />
      </div>
</form>
</div>
</div>

按钮的类是

.button {
  margin: 0 0 5px;
  padding: 0 12px;
  height: 28px;
  line-height: 28px;
  font-size: 18px;
  font-weight: bold;
  color: #555555;
  text-decoration: none;
  text-shadow: 0 1px white;
  background: #dfdfdf;
  border-width: 1px 1px 0;
  border-style: solid;
  border-color: #cecece #bababa #a8a8a8;
  border-radius: 3px 3px 2px 2px;
  outline: 0;
  display: inline-block;
  vertical-align: baseline;
  zoom: 1;
  *display: inline;
  *vertical-align: auto;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  background-image: -webkit-linear-gradient(top, #f1f1f1 0%, #dfdfdf 70%, #dadada 100%);
  background-image: -moz-linear-gradient(top, #f1f1f1 0%, #dfdfdf 70%, #dadada 100%);
  background-image: -o-linear-gradient(top, #f1f1f1 0%, #dfdfdf 70%, #dadada 100%);
  background-image: linear-gradient(to bottom, #f1f1f1 0%, #dfdfdf 70%, #dadada 100%);
  -webkit-box-shadow: inset 0 1px #fdfdfd, inset 0 0 0 1px #eaeaea, 0 1px #a8a8a8, 0 3px #bbbbbb, 0 4px #a8a8a8, 0 5px 2px rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 1px #fdfdfd, inset 0 0 0 1px #eaeaea, 0 1px #a8a8a8, 0 3px #bbbbbb, 0 4px #a8a8a8, 0 5px 2px rgba(0, 0, 0, 0.25);
}

.button:hover, .button:active {
  background: #dfdfdf;
  border-top-color: #c9c9c9;
}

.button:active, .button.green:active, .button.blue:active, .button.yellow:active, .button.red:active, .button.purple:active, .button.grey:active, .button.black:active {
  vertical-align: -5px;
  margin-bottom: 0;
  padding: 1px 13px 0;
  border-width: 0;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(0, 0, 0, 0.4), 0 1px white;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(0, 0, 0, 0.4), 0 1px white;
}

如果我从按钮中删除'class =“按钮”'属性，那么当我点击按钮时，id =“profile”的div不会向下移动，但是我失去了按钮上的所有样式。我如何调整东西，以便当我点击它而不是整个表格时，只有我的按钮向下移动？

编辑：容器（id =“profile”的元素）具有以下CSS。我试着将所有内容放在屏幕中间

#profile {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align:center;
}

Answer 1

您应该尝试更改表单的大小。我认为你有一个固定的高度形式，按钮位于底部，你的按钮最初的底部边距为5px，点击时缩小为0.

因此，单击按钮会占用额外的空间。

我认为你不需要这个，但检查一下你的大脑是否有一些css边缘属性。 This link

Answer 2

这是因为在margin-bottom状态中删除了:active。您可以将相同的金额添加到margin-top以弥补差距。

.button:active {
  margin-top: 5px;
}

当我单击“保存”按钮时，我的整个表单向下移动几个像素，我想避免

2 个答案: