Styling list elements vertically using css

Question

I have the following html5 and css, where I have a username & password type input. I would like to have the li elements to be displayed vertically, instead of horizontally, and have the two labels align vertically, while the two input text boxes also align vertically.

Code:

 .loginform li { background-color: purple; display:block; float:left; width:300px; heigh:150px; padding: 5px; } 

 <section class="loginform cf"> <form name="login" action="index_submit" method="get" accept-charset="utf-8"> <ul> <li> <label for="usermail">Email</label> <input type="email" name="usermail" placeholder="yourname@email.com" required> </li> <li><label for="password">Password</label> <input type="password" name="password" placeholder="password" required> </li> <li> <input type="submit" value="Login"> </li 

Answer 1

I think you want something like this, hope it will helps you.

and check your height spell it was heigh

 .loginform li { background-color: purple; display:block; /*float:left;*/ width:300px; /*height:150px;*/ padding: 5px; box-sizing:border-box } .loginform li label, .loginform li input{ display:block; width:100%; box-sizing:border-box } 

 <section class="loginform cf"> <form name="login" action="index_submit" method="get" accept-charset="utf-8"> <ul> <li> <label for="usermail">Email</label> <input type="email" name="usermail" placeholder="yourname@email.com" required> </li> <li><label for="password">Password</label> <input type="password" name="password" placeholder="password" required> </li> <li> <input type="submit" value="Login"> </li 

Answer 2

Have your list items clear everything to the left, so that they stack up underneath one-another.

Then give your labels a width and they will line up alone with your <input> elements:

 .loginform li { background-color: purple; display:block; float:left; clear: left; width:300px; height:150px; padding: 5px; } .loginform li label{ display: inline-block; width: 30%; } 

 <section class="loginform cf"> <form name="login" action="index_submit" method="get" accept-charset="utf-8"> <ul> <li> <label for="usermail">Email</label> <input type="email" name="usermail" placeholder="yourname@email.com" required> </li> <li><label for="password">Password</label> <input type="password" name="password" placeholder="password" required> </li> <li> <input type="submit" value="Login"> </li> </ul> </form> 

FYI: height , not heigh

Answer 3

Did you mean like this?

https://jsfiddle.net/ytaknyp9/1/

Just put

<br />

between your label and input.