登录和注册按钮应保持固定在浏览器的右上角

我希望登录和注册链接或按钮应保持固定在浏览器窗口的右上角位置与包装div。但是当我更改浏览器窗口大小时，按钮会消失或通过标题。登录和注册按钮应保持固定在浏览器的右上角

HTML代码具有具有UL列表，然后头股利部分中login_bar DIV部分

<div id="wrapper"> 
<div id="login_bar" style="text-align: right">            
      <ul id="login_signup"> 
       <li><a href="#" id="login_link">Login <span>&#x25c0;</span></a></li> 
       <li><a href="#" id="sign_link">SignUp <span>&#x25c0;</span></a></li> 
      </ul> 
</div> 

<div id="header"> 
</div> 
</div>

CSS文件

#login_bar{ 
width:300px;   
position:fixed; 
z-index:10;   
border:1px solid black; 
top:-5px; 
right:150px; 
} 

#header{ 
width:1000px;  
background-image:url('../images/hf1.jpg'); 
background-size: 100%; 
background-repeat: no-repeat; 
position: relative; 
border-radius:5px; 
min-height: 100px; 
} 

#login_signup{ 
float:right;  
} 

#login_signup > li{ 
float:left;  
padding-right: 30px; 
list-style: none; 
line-height:25px; 
padding-top:6px; 
display:inline-block;   
} 

#login_signup li > a{ 
font-family:sans-serif; 
font-size: 17px; 
font-weight: bold; 
color:white; 
padding:5px; 
display:inlineblock; 
background-color:black; 
border-radius:5px; 
-moz-border-radius:5px; 
-webkit-border-radius: 5px; 
-o-border-radius:5px; 

box-shadow: rgb(0,0,0) 0px 0px 10px; 
-moz-box-shadow: rgb(0,0,0) 0px 0px 10px; 
-webkit-box-shadow: rgb(0,0,0) 0px 0px 10px; 
-o-box-shadow:rgb(0,0,0) 0px 0px 10px; 
} 

#login_signup li span{ 
font-size: 12px;   
display:inlineblock; 
} 

#login_signup li a:hover{ 
cursor: pointer; 
box-shadow: rgb(255,255,255) 0px 0px 5px; 
-moz-box-shadow: rgb(255,255,255) 0px 0px 5px; 
-webkit-box-shadow: rgb(255,255,255) 0px 0px 5px; 
-o-box-shadow:rgb(255,255,255) 0px 0px 5px; 
border-radius: 2px; 
background-color: white;  
color:#006666; 
}

两个股利部分是包装DIV这里面在中心

#wrapper{ 
width:1000px; 
min-height:600px;  
margin:5px auto; 
border-radius:5px; 
border-style: solid; 
border:solid 1px grey; 
box-shadow:rgb(0,0,0) 0px 0px 10px; 
-moz-box-shadow: rgb(0,0,0) 0px 0px 10px; 
-webkit-box-shadow: rgb(0,0,0) 0px 0px 10px; 
-o-box-shadow:rgb(0,0,0) 0px 0px 10px; 
background-color: black; 
}

来源

2013-04-10 Shubham Maheshwari

当前，您正在使用position: fixed和right:150px;您login_bar，你需要正确的值更改为0px在右侧进行修复：

#login_bar{ 
    width:300px;   
    position:fixed; 
    z-index:10;   
    border:1px solid black; 
    top:-5px; 
    right:0px; 
}

以及删除列表的padding-right: 30px;：

#login_signup > li{ 
    float:left;  
    padding-right: 30px; /* <-- Remove this */ 
    list-style: none; 
    line-height:25px; 
    padding-top:6px; 
    display:inline-block;   
}

Demo

注：我不确定这是你想要的，所以请随时索要更多的说明。

来源

2013-04-10 17:30:01 Eli

我测试了你的原始设置，它似乎工作正常（至少从我如何理解你的问题）。在IE，Firefox和Chrome测试它，看起来不错... ...的CSS下面我使用的HTML文件：

<!DOCTYPE html> 
<html> 
<head> 
<link href="test.css" rel="stylesheet" /> 
</head> 
<body> 
<div id="wrapper"> 
    <div id="login_bar" style="text-align: right">            
     <ul id="login_signup"> 
      <li><a href="#" id="login_link">Login <span>&#x25c0;</span></a></li> 
      <li><a href="#" id="sign_link">SignUp <span>&#x25c0;</span></a></li> 
     </ul> 
    </div> 
    <div id="header"> 
     test 
    </div> 
</div> 
</body> 
</html>

test.css：

#wrapper{ 
width:1000px; 
min-height:600px;  
margin:5px auto; 
border-radius:5px; 
border-style: solid; 
border:solid 1px grey; 
box-shadow:rgb(0,0,0) 0px 0px 10px; 
-moz-box-shadow: rgb(0,0,0) 0px 0px 10px; 
-webkit-box-shadow: rgb(0,0,0) 0px 0px 10px; 
-o-box-shadow:rgb(0,0,0) 0px 0px 10px; 
background-color: black; 
} 

#login_bar{ 
width:300px;   
position:fixed; 
z-index:10;   
border:1px solid black; 
top:-5px; 
right:150px; 
display:inline-block; 
} 

#header{ 
width:1000px;  
background-image:url('../images/hf1.jpg'); 
background-size: 100%; 
background-repeat: no-repeat; 
position: relative; 
border-radius:5px; 
min-height: 100px; 
} 

#login_signup{ 
float:right; 
/*display:inline; */ 
} 

#login_signup > li{ 
float:left;  
padding-right: 30px; 
list-style: none; 
line-height:25px; 
padding-top:6px; 
display:inline-block;   
} 

#login_signup li > a{ 
font-family:sans-serif; 
font-size: 17px; 
font-weight: bold; 
color:white; 
padding:5px; 
display:inline-block; 
background-color:black; 
border-radius:5px; 
-moz-border-radius:5px; 
-webkit-border-radius: 5px; 
-o-border-radius:5px; 

box-shadow: rgb(0,0,0) 0px 0px 10px; 
-moz-box-shadow: rgb(0,0,0) 0px 0px 10px; 
-webkit-box-shadow: rgb(0,0,0) 0px 0px 10px; 
-o-box-shadow:rgb(0,0,0) 0px 0px 10px; 
} 

#login_signup li span{ 
font-size: 12px;   
display:inline-block; 
} 

#login_signup li a:hover{ 
cursor: pointer; 
box-shadow: rgb(255,255,255) 0px 0px 5px; 
-moz-box-shadow: rgb(255,255,255) 0px 0px 5px; 
-webkit-box-shadow: rgb(255,255,255) 0px 0px 5px; 
-o-box-shadow:rgb(255,255,255) 0px 0px 5px; 
border-radius: 2px; 
background-color: white;  
color:#006666; 
}

如果您以前有在IE浏览器的问题，你可能忘了在html文件的顶部添加<!DOCTYPE html> ...

来源

2013-04-10 17:38:23 LoBS

登录和注册按钮应保持固定在浏览器的右上角

回答

相关问题