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

僅供參考： 身高 ，不高

Answer 3

你是這個意思嗎

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

剛放

<br />

在標簽和輸入之間。