Zmiana pionowego menu w poziome CSS

Dla specjalistów Webmastering
#1

Witam,

posiadam taki kod CSS:

h12{
	
	
	color: #fff;
	font-family: Arial;
	font-size: 12px;
	margin-right:40;
	 

	

}



.grad{
	position: relative;
	top:120;
	  
}



.login{
	position: absolute;
	display:inline;   
	left: calc(50% - 50px);
	margin-top:70;
	height: 150px;
	width: 350px;
	
	z-index: 8;
	

}


.login input[type=text]{
	width: 250px;
	height: 30px;
	background: transparent;
	border: 1px solid rgba(255,255,255,0.6);
	border-radius: 2px;
	color: #fff;
	font-family: 'Exo', sans-serif;
	font-size: 16px;
	font-weight: 400;
	padding: 4px;
	float:left;
	display:inline;   
}

.login input[type=password]{
	width: 250px;
	height: 30px;
	background: transparent;
	border: 1px solid rgba(255,255,255,0.6);
	border-radius: 2px;
	color: #fff;
	font-family: 'Exo', sans-serif;
	font-size: 16px;
	font-weight: 400;
	padding: 4px;
	margin-top: 10px;
	float:left;
	display:inline;   
}

.login input[type=button]{
	width: 260px;
	height: 35px;
	background: #fff;
	border: 1px solid #fff;
	cursor: pointer;
	border-radius: 2px;
	color: #a18d6c;
	font-family: 'Exo', sans-serif;
	font-size: 16px;
	font-weight: 400;
	padding: 6px;
	margin-top: 10px;
	float:left;
	display:inline;   
}

.login input[type=button]:hover{
	opacity: 0.8;
	display:inline;   
}

.login input[type=button]:active{
	opacity: 0.6;
	display:inline;   
}

.login input[type=text]:focus{
	outline: none;
	border: 1px solid rgba(255,255,255,0.9);
	display:inline;   
}

.login input[type=password]:focus{
	outline: none;
	border: 1px solid rgba(255,255,255,0.9);
	display:inline;   
}

.login input[type=button]:focus{
	outline: none;
	display:inline;   
}

::-webkit-input-placeholder{
   color: rgba(255,255,255,0.6);
   display:inline;   
}

::-moz-input-placeholder{
   color: rgba(255,255,255,0.6);
   display:inline;   
}

oraz taki HTML:

div class="login"
		
				input type="text" placeholder="username" name="user"br
				input type="password" placeholder="password" name="password"br
				input type="button" value="Login"
		/div

Wszystko działa ok, ale chce aby ten panel był w poziomie a nie tak jak teraz w pionie. Próbowałem już z inline i coś z label czy coś takiego ale niestety nic nie działa. Jeśli ktoś zna na to jakiś sposób albo ciekawe gotowe CSS login free templates to będę wdzięczny. Oczywiście tylko poziome :slight_smile:

#2

Wszystko przez znaczniki <br />, które forsują CSS i łamią linię. Kod dość niepoprawny, więc jego edycja mija się z celem. Lepiej będzie jeżeli zaprezentujesz jaki efekt chcesz otrzymać.