我想在同一行中对齐内容,尝试使用display:inline,span但我用完了想法,我基本上想要复选框,记住我和Register一样。添加代码和jsfiddle:
<body>
<header>
<div class="container">
<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">Remember me
<div class="login-options">
<ul>
<li>
<a href="#">Register</a></li>
<li><a href="#">Forgot password?</a></li>
</ul>
</div>
</form>
<div class="navbar">
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div></div></div>
</header> <!--end of header-->
</body>
CSS
body {
background-color: #E3E3E3;
font-size: 12px;
}
a{
text-decoration: none;
color: #FFF;
}
li{
list-style-type: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #4f4f4f;
font-family: "BebasNeue", sans-serif;
margin: 0;
font-weight: normal;
}
header{
background-color: #2C2C2C;
color: #FFF;
padding-top: 30px;
height: 200px;
}
header .login-form{
position: absolute;
top: 30px;
right: 300px;
color: black;
}
.login-form input[type="text"]{
height: 30px;
border: 2px solid #ffe6e6;
border-radius: 3px;
color: #FFF;
}
.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;
top: 10px;
left: 230px;
color: #FFF;
}
jsfiddle:https://jsfiddle.net/3m7wnq4b/
答案 0 :(得分:1)
这就是你想要的吗?
body {
background-color: #E3E3E3;
font-size: 12px;
}
a{
text-decoration: none;
color: #FFF;
}
li{
list-style-type: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #4f4f4f;
font-family: "BebasNeue", sans-serif;
margin: 0;
font-weight: normal;
}
header{
background-color: #2C2C2C;
color: #FFF;
padding-top: 30px;
height: 200px;
}
header .login-form{
position: absolute;
top: 30px;
right: 300px;
color: black;
}
.login-form input[type="text"]{
height: 30px;
border: 2px solid #ffe6e6;
border-radius: 3px;
color: #FFF;
}
.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: 27px;
left: 230px;
color: #FFF;
}
&#13;
<body>
<header>
<div class="container">
<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">Remember me
<div class="login-options">
<ul>
<li>
<a href="#">Register</a></li>
<li><a href="#">Forgot password?</a></li>
</ul>
</div>
</form>
<div class="navbar">
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div></div></div>
</header> <!--end of header-->
</body>
&#13;