swipeales swipeales - 5 months ago 10
CSS Question

align content horizontal without going to new row

I want to align content in same row, tried using display: inline, span but i ran out of ideas, I want basically checkbox remember me be in same line as Register. Adding code and jsfiddle bellow:

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

Answer

Is that what you want?

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;
}
	<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>

Comments