html - 使用 CSS 对齐登录表单(带有错误文本)

Question

我希望这将是一个容易解决的问题。我正在尝试创建一个如下所示的登录表单:

邮箱...... |文本框 |错误文本
密码 |文本框 |错误文本

我遇到的问题是用于排列文本框的 CSS(行内 block )强制将错误文本换行。所以我得到:

邮箱...... |文本框
错误文本
密码 |文本框
错误文本

这是到目前为止的代码:

HTML

<form method="post">

  <p>
    <label for="email">Email </label>
    <input type="text" name="email" value=""> </input>
    <div class="error"> Email Error </div> 
  </p> 


   <p>
    <label for="password">Password </label>
    <input type="password" name="password" value=""> </input>
    <div class="error"> Password Error </div> 
  </p>  

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

</form>

CSS

form
{
  display: inline;
}

p label
{
  display:inline-block;
  width: 60px;
}

p input
{
  width: 150px;
}

.error
{
  color:red;
}

http://jsfiddle.net/CF76f/

Answer 1

使用span代替div标签来显示错误