登錄和註冊按鈕應保持固定在瀏覽器的右上角

我希望登錄和註冊鏈接或按鈕應保持固定在瀏覽器窗口的右上角位置與包裝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

登錄和註冊按鈕應保持固定在瀏覽器的右上角

回答

相關問題