Question

我有一个带有标签和输入的登录表单，我无法在左侧输入标签并在右侧输入。目前，他们坐在彼此之上。这是HTML：

    <div class="login">
    <form name="login" action="submit" method="get" accept- charset="utf-8">


                <label for="usermail">Username</label>
                <input type="email" name="usermail"  placeholder="yourname@email.com" required>


                <label for="password">Password</label>
                <input type="password" name="password" placeholder="password" required>

                <input type="submit" value="Login">


    </form>
</div>

这是CSS：

form   {
margin:auto;
position:relative;
width:375px;
height:250px;
font-family: Lucida Sans, Geneva, sans-serif;
font-size: 14px;
font-style: italic;
line-height: 24px;
font-weight: bold;
text-decoration: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
 border-radius: 10px;
 padding:10px;
 border: 1px solid #999;
 border: inset 1px solid #333;

 }
 input    { float:right;
 width:350px;
 display:block;
 border: 1px solid #999;
 height: 25px;

 }

这是JSFiddle https://jsfiddle.net/ojz87d0x/

Answer 1

在输入时，将display:block;更改为display:inline-block;，然后添加以下内容：

label {
    display: inline-block;
    float:left;
    clear:both;
}

input[type="submit"] {
    clear: both;
}

您还需要确保input的宽度和form的宽度不同，以便为label留出空间。在这个例子中[在小提琴]。我将input设置为275px，将form设置为375px。

这是一个较新的update to your fiddle。

Answer 2

首先，input s太宽，label和input在表单中彼此相邻。因此，要么拓宽表格，要么缩短input s。

接下来，将float: left添加到标签。

＆＃13;

form {
  margin: auto;
  position: relative;
  width: 375px;
  height: 250px;
  font-family: Lucida Sans, Geneva, sans-serif;
  font-size: 14px;
  font-style: italic;
  line-height: 24px;
  font-weight: bold;
  text-decoration: none;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  padding: 10px;
  border: 1px solid #999;
  border: inset 1px solid #333;
}
input {
  float: right;
  width: 300px; /*smaller width*/
  display: block;
  border: 1px solid #999;
  height: 25px;
}
label {
  float: left;
  margin-top: 3px;

＆＃13;

<div class="login">
  <form name="login" action="submit" method="get" accept- charset="utf-8">


    <label for="usermail">Username</label>
    <input type="email" name="usermail" placeholder="yourname@email.com" required>


    <label for="password">Password</label>
    <input type="password" name="password" placeholder="password" required>

    <input type="submit" value="Login">


  </form>
</div>

＆＃13;

使用CSS将标签左对齐在表单上

2 个答案: