CSS 将登录按钮粘贴到顶部

Question

我想做这样的事情:

http://puu.sh/1b5jU

所以我在这里做了一些事情，但是当它在内部引导容器时，它在所有屏幕上看起来都不一样，960px:

http://justxp.plutohost.net/slyfiles/index.html

它在 friend 屏幕上的样子:

http://puu.sh/1b51h

这是所有的CSS

.delogin {
width: 70px;
height: 20px;
background-color: #443b28;
-webkit-border-radius: 0px 0px 7px 7px;
border-radius: 0px 0px 7px 7px;
position: absolute;
margin-left: 51%;
-webkit-transition: all 100ms ease-in-out;
        -moz-transition: all 100ms ease-in-out;
        -ms-transition: all 100ms ease-in-out;
        -o-transition: all 100ms ease-in-out;
        transition: all 100ms ease-in-out;
}

.login {
width: 70px;
height: 20px;
background-color: #443b28;
-webkit-border-radius: 0px 0px 7px 7px;
border-radius: 0px 0px 7px 7px;
position: absolute;
margin-left: 51%;
right: 0px;
-webkit-transition: all 100ms ease-in-out;
        -moz-transition: all 100ms ease-in-out;
        -ms-transition: all 100ms ease-in-out;
        -o-transition: all 100ms ease-in-out;
        transition: all 100ms ease-in-out;
}
.login:hover{
width: 70px;
height: 20px;
background-color: #443b28;
-webkit-border-radius: 0px 0px 7px 7px;
border-radius: 0px 0px 7px 7px;
position: absolute;
margin-left: 51%;
top: 5px;
-webkit-transition: all 100ms ease-in-out;
        -moz-transition: all 100ms ease-in-out;
        -ms-transition: all 100ms ease-in-out;
        -o-transition: all 100ms ease-in-out;
        transition: all 100ms ease-in-out;
}

#login {
float: right;
margin-right: 11px;
font-weight: bold;
font-size: 11px;
color: #fff;
-webkit-transition: all 100ms ease-in-out;
        -moz-transition: all 100ms ease-in-out;
        -ms-transition: all 100ms ease-in-out;
        -o-transition: all 100ms ease-in-out;
        transition: all 100ms ease-in-out;
  }
  #lock {
  background-image: url("../img/lock.png");
  width: 13px;
  height: 10px;
  position: absolute;
  top: 5px;
  left: 7px;
-webkit-transition: all 100ms ease-in-out;
        -moz-transition: all 100ms ease-in-out;
        -ms-transition: all 100ms ease-in-out;
        -o-transition: all 100ms ease-in-out;
        transition: all 100ms ease-in-out;
  }

HTML:

  <div class="delogin">
      <div class="login">
             <div id="lock"></div>
             <span id="login"><a href="login.php">LOGIN</a></span>
      </div>
  </div>

如果需要，这是整个 HTML\CSS:

http://pastebin.com/qJkA99nW

问题:

如何将登录按钮固定在 960 像素网格系统内的右侧，而不使菜单将任何像素移动到任何一侧？并使其在所有屏幕和浏览器上看起来都一样或相似？

我从来没有见过这种关于如何制作这样的粘性按钮的问题或教程。

谢谢!

Answer 1

将 position: relative 添加到您的 .container

.container {
    margin-left: auto;
    margin-right: auto;
    position: relative; /* this */
}

然后设置按钮的位置

.delogin {
    -moz-transition: all 100ms ease-in-out 0s;
    background-color: #443B28;
    border-radius: 0 0 7px 7px;
    height: 20px;
    margin-left: 51%;
    position: absolute;
    right: 0; /* this */
    width: 70px;
}