为什么我不能在这里单击注册,忘记密码和复选框链接?屏幕已折叠,因此将其拖动以增加宽度以进行样式设置。任何人都知道为什么即使它位于引导容器中,它也会那样塌陷?

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/

10-16 21:18
查看更多