html - 使用 css 垂直样式化列表元素

Question

我有以下 html5 和 css，我在其中输入了用户名和密码类型。我想让 li 元素垂直显示，而不是水平显示，并让两个标签垂直对齐，同时两个输入文本框也垂直对齐。

代码:

.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

我想你想要这样的东西，希望它能帮助到你。

然后检查你的高度拼写是 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