0

私はこのようなものを作りたいです：

http://puu.sh/1b5jU

だから私はここで何かをしましたが、その内部のブートストラップコンテナ、960pxのときはまだすべての画面で同じようには見えません：

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

友達の画面でどのように表示されるか：

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

質問：

ピクセルをいずれかの側に移動するメニューを作成せずに、ログインボタンを960pxグリッドシステム内の右側に固定するにはどうすればよいですか？そして、それをフィットさせて、すべての画面、ブラウザで少し同じまたは類似して見えるようにしますか？

このような粘着性のあるボタンを作成する方法について、この種の質問やチュートリアルを見たことがありません。

ありがとう！

4

1 に答える 1

2

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;
}
于 2012-10-03T19:41:07.620 に答える