使用CSS将表单标签对齐到左侧

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="[e-mail]" 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/

- Assy

---

表单的宽度太小，标签无法左对齐...我将宽度增加到475像素，标签就在左侧了，尽管您对输入框的样式进行了一些更改。 - danidee

Answer 1

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

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

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

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

这是更新的fiddle示例。

- RyanS

---

你应该注意到从输入框中_去除了宽度_。 - hungerstar

谢谢，非常好。但我需要提交按钮是全长的，因为它在右边变小了。 - Assy

@Assy - 抱歉，我最新的更新应该已经解决了这个问题。我移除了 input 上的 width 属性，但是忘记了它。 - RyanS

非常感谢，我可以调整长度使其完美。 - Assy

Answer 2

首先，输入框的宽度对于表单内的标签和输入框来说都太宽了，所以要么扩大表单，要么缩短输入框。

其次，在标签中添加“float: left”。

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;

<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="[e-mail]" required>


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

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


  </form>
</div>

- cocoa