为什么我不能在这里单击注册,忘记密码和复选框链接?屏幕已折叠,因此将其拖动以增加宽度以进行样式设置。任何人都知道为什么即使它位于引导容器中,它也会那样塌陷?
jsfiddle:https://jsfiddle.net/germfpko/
<header>
<div class="container">
<img class="logo" src="" alt="lol">
<form class="login-form">
<input type="text" placeholder="Email Adress">
<input type="password" placeholder="Password">
<button type="submit" class="btn btn-primary">Login</button>
<br>
<input type="checkbox" name="remember"><span style="color:#FFF">Remember me</span>
<div class="login-options">
<ul>
<li><a href="#">Reg</a></li>
<li><a href="#">Forgot pass?</a></li>
</ul>
</div>
</form>
</div>
<div class="navbar">
<div class="container">
<ul>
<li><a href="#">!!</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</header> <!--end of header-->
的CSS
header{
background-color: #2C2C2C;
color: #FFF;
padding-top: 20px;
}
header .login-form{
position: absolute;
top: 30px;
right: 300px;
color: black;
}
header a{
text-decoration: none;
color: #FFF;
}
header li{
list-style-type: none;
}
header img.logo{
float: left;
}
.login-form input[type="text"]{
height: 30px;
border: 2px solid #ffe6e6;
border-radius: 3px;
}
.login-form input[type="text"]:focus{
border: 2px solid #ffe6e6;
}
.login-form input[type="password"]{
height: 30px;
border: 2px solid #ffe6e6;
border-radius: 3px;
}
.login-form input[type="password"]:focus{
border: 2px solid #ffe6e6;
}
.login-form .login-options{
position: relative;
bottom: 20px;
left: 230px;
color: #FFF;
}
.navbar{
padding-top: 70px;
}
.navbar ul {
list-style-type: none;
}
.navbar li {
display: inline-block;
width: auto;
font-size: 18px;
padding-right: 30px;
}
.navbar li a {
display: block;
color: #FFFFFF;
text-decoration: none;
}
.navbar li a:hover{
background-color: #ff8566;
}
最佳答案
header{
background-color: #2C2C2C;
color: #FFF;
padding-top: 20px;
}
header .login-form{
position: absolute;
top: 30px;
right: 300px;
color: black;
z-index:9999;
}
header a{
text-decoration: none;
color: #FFF;
}
header li{
list-style-type: none;
}
header img.logo{
float: left;
}
.login-form input[type="text"]{
height: 30px;
border: 2px solid #ffe6e6;
border-radius: 3px;
}
.login-form input[type="text"]:focus{
border: 2px solid #ffe6e6;
}
.login-form input[type="password"]{
height: 30px;
border: 2px solid #ffe6e6;
border-radius: 3px;
}
.login-form input[type="password"]:focus{
border: 2px solid #ffe6e6;
}
.login-form .login-options{
position: relative;
bottom: 20px;
left: 230px;
color: #FFF;
}
.navbar{
padding-top: 70px;
}
.navbar ul {
list-style-type: none;
}
.navbar li {
display: inline-block;
width: auto;
font-size: 18px;
padding-right: 30px;
}
.navbar li a {
display: block;
color: #FFFFFF;
text-decoration: none;
}
.navbar li a:hover{
background-color: #ff8566;
}
<header>
<div class="container">
<img class="logo" src="" alt="lol">
<form class="login-form">
<input type="text" placeholder="Email Adress">
<input type="password" placeholder="Password">
<button type="submit" class="btn btn-primary">Login</button>
<br>
<input type="checkbox" name="remember"><span style="color:#FFF">Remember me</span>
<div class="login-options">
<ul>
<li><a href="#">Reg</a></li>
<li><a href="#">Forgot pass?</a></li>
</ul>
</div>
</form>
</div>
<div class="navbar">
<div class="container">
<ul>
<li><a href="#">!!</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</header> <!--end of header-->
只需在css下面添加
header .login-form{z-index:9999;}
关于css - 无法单击超链接,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38140517/