Question

我有以下html5和css，我有一个用户名＆amp;密码类型输入。我希望li元素垂直显示，而不是水平显示，并使两个标签垂直对齐，而两个输入文本框也垂直对齐。

代码：

＆＃13;

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

＆＃13;

<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

＆＃13;

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 />

标签和输入之间的

。

使用css垂直样式列表元素

3 个答案: