1

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

HTML 代码有一个 login_bar div 部分，它有一个 ul 列表，然后是标题 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 部分都位于中心的包装器 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;
}
4

2 回答 2

0

我测试了您的原始设置，它似乎可以正常工作（至少从我理解您的问题的方式来看）。在 IE、Firefox 和 chrome 中对其进行了测试，看起来不错……在我使用的 html 文件的 css 下方：

<!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>

测试.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 中遇到问题，您可能只是忘记<!DOCTYPE html>在 html 文件顶部添加...

于 2013-04-10T17:38:23.423 回答
0

目前，您正在使用position: fixedandright: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;           
}

演示

注意：我不确定这是否是您想要的，因此请随时要求更多说明。

于 2013-04-10T17:30:01.990 回答