Question

我正在尝试使用自定义CSS3按钮生成器（http://www.cssportal.com/css3-button-generator/）为我的网站按钮嵌入一些CSS3。但是，它会产生一些恼人的问题。整个div被推倒了！包含它的div的CSS是：

.login {
    position: absolute;
    right: 10px;
    top: 10px;
    color: #DDD;
    font-size: 14px;
}

按钮的CSS：

.button {
font-family: Arial;
  color: #ffffff;
  font-size: inherit;
  padding: 7px;
  text-decoration: none;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-box-shadow: 0px 1px 3px #666666;
  -moz-box-shadow: 0px 1px 3px #666666;
  text-shadow: 1px 1px 3px #666666;
  border: solid #003366 2px;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#42aaff), to(#001a33));
  background: -moz-linear-gradient(top, #42aaff, #001a33);
}

如果你想查看网站本身的html，那就是http://www.nosfistis.com/的#navbar

Answer 1

CSS规则填充：7px导致它被推下。目前，您使用绝对定位将所有这些元素按下10px。你要么需要将一个按钮拉上负边距（通常是坏主意），要么将所有其他按钮拉下来。通常尝试在这种情况下保持元素的高度相同（即：向较小的元素添加填充）。

CSS3按钮向下推动整个div

1 个答案: