我想做这样的事情:
所以我在这里做了一些事情,但是当它在内部引导容器时,它在所有屏幕上看起来都不一样,960px:
http://justxp.plutohost.net/slyfiles/index.html
它在 friend 屏幕上的样子:
这是所有的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:
问题:
如何将登录按钮固定在 960 像素网格系统内的右侧,而不使菜单将任何像素移动到任何一侧?并使其在所有屏幕和浏览器上看起来都一样或相似?
我从来没有见过这种关于如何制作这样的粘性按钮的问题或教程。
谢谢!
最佳答案
将 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;
}
关于CSS 将登录按钮粘贴到顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12715552/