使用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

Answer 2

有列表项明确的一切到左边，让他们堆叠起来的一另一下方。

然后给你的标签宽度，他们将单独排队与<input>元素：

.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：高度，不HEIGH

Answer 3

你的意思是像这个？

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

只要把

<br /> 

您的标签和输入之间。