Label wyświetla się pod zamianst obok checboxa

Question

Cześć,

Czy wie ktoś może dlaczego mój label wyświetla się pod zamiast obok checkboxa?

 

html

				<div class="login_f">
					
					<h2>Nie masz konta? Zarejestruj się!</h2><hr>
					
					<form action="regiester.php" method="post">
						
						<p><label for="r_login">Twoja nazwa użytkownika:</label><br>
						<input type="text" name="r_login" />
						
						<label for="email">Twój adres e-mail:</label><br>
						<input type="text" name="email">
					
						<label for="r_pass">Twoje hasło:</label></br>
						<input type="password" name="r_pass" />
						
						<label for="password_confirm">Powtórz hasło:</label></br>
						<input type="password" name="password_confirm"/>
						
						<input type="checkbox" name="conditions" />
						<label for="conditions">Potwierdzam akceptację regulaminu</label>
					
					
					<form>
					
				</div>

CSS

login_f
{

    font-size: 1em;
	width:30%;
	padding:3%;
	text-align:left;
	margin: 25px;
	-webkit-box-shadow: 0px 8px 30px 0px rgba(66, 68, 90, 1);
	-moz-box-shadow: 0px 8px 30px 0px rgba(66, 68, 90, 1);
	box-shadow: 0px 8px 30px 0px rgba(66, 68, 90, 1);
}



input
{
	width:100%;
	font-size: 1em;
	background-color: #F9FAFB;
	border-radius: 5px;
	margin-bottom: 3%;
	box-sizing: border-box;
	transition: all 0.2s ease-in-out;
	background: #F9FAFB;
	border: 1px solid #CCCCCC;
	padding:10px;
	color: #222222;
}

input:focus
{


	outline: none !important;
    border:1px solid #719ECE;
    box-shadow: 0 0 10px #719ECE;
}

.checkbox
{
	flex-direction:row;
}

label
{
	display:block;
	margin-bottom:-2%;
	font-size: 1em;
	font-weight:900;
}

 

 

Answer 1

Możesz też użyć takiego zapisu

[ on-line ]

input:not([type="checkbox"]) {
  ...
}

 

<div class="login_f">
  <h2>Nie masz konta? Zarejestruj się!</h2>
  <hr>
 
  <form action="regiester.php" method="post">
    <p>
      <label for="r_login">Twoja nazwa użytkownika:</label>
      <input type="text" name="r_login" />
 
      <label for="email">Twój adres e-mail:</label>
      <input type="email" name="email" />
 
      <label for="r_pass">Twoje hasło:</label>
      <input type="password" name="r_pass" />
 
      <label for="password_confirm">Powtórz hasło:</label>
      <input type="password" name="password_confirm" />
 
      <input type="checkbox" name="conditions" />
      <label for="conditions">Potwierdzam akceptację regulaminu</label>
    </p>
  </form>
</div>

.login_f
{ 
    font-size: 1em;
    width: 30%;
    padding: 3%;
    text-align: left;
    margin: 25px;
    -webkit-box-shadow: 0px 8px 30px 0px rgba(66, 68, 90, 1);
    -moz-box-shadow: 0px 8px 30px 0px rgba(66, 68, 90, 1);
    box-shadow: 0px 8px 30px 0px rgba(66, 68, 90, 1);
} 
input:not([type="checkbox"])
{
    width: 100%;
    font-size: 1em;
    background-color: #F9FAFB;
    border-radius: 5px;
    margin-bottom: 3%;
    box-sizing: border-box;
    transition: box-shadow 0.2s ease-in-out;
    background: #F9FAFB;
    border: 1px solid #CCCCCC;
    padding: 10px;
    color: #222222;
} 
input:focus
{ 
    outline: none;
    border: 1px solid #719ECE;
    box-shadow: 0 0 10px #719ECE;
} 
label
{
    margin-bottom: -2%;
    font-size: 1em;
    font-weight: 900;
}

 

P.S. masz błędy

• brakuje kropki w zapisie: login_f => .login_f (w css)
• masz otwarty <p> bez zamknięcia (7 linia)
• masz nieprawidłowy zapis: </br> => <br>

proponuję

<input type="text" name="email">  na <input type="email" name="email">

Comments

Dziękuję :)

Answer 2

OK znalazłem rozwiązanie. Wystarczyło użyć nowej klasy dla checkboxa "zerującej" ustawienia display i with, które wcześniej były brane od elementu nadrzędnego. Zostawiam temat - być może komuś kiedyś pomoże :)

.checkbox
{
	display:unset;
	width:unset;
}