0

I'm trying to embed some CSS3 for my website buttons using custom CSS3 button generator (http://www.cssportal.com/css3-button-generator/). However, it creates some annoying issues. The whole div is pushed downwards! The CSS of the div that includes it is:

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

And the CSS of the button:

.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);
}

If you want to check the html of the website itself, it's the #navbar of http://www.nosfistis.com/

4

1 回答 1

1

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

于 2012-12-11T03:11:04.470 回答