html - 内联显示不会定位

Question

我一直在尝试让一个简单的“登录”表单垂直显示并定位。似乎我可以做一个或另一个，不能两者兼而有之。我尝试了不同的方法来做到这一点，但都没有成功，所以这基本上就是我最后的方法。

HTML

<form class = "login">
E-Mail: <input type="text" name="id" maxlength="30" value="" />
Password: <input type="text" name="pw" maxlength="30" value="" />
<input type="submit" name="submit" value="Login" />
</form>    

CSS

login {
position:absolute;
top:10px;
left:185px;
}

login.input { 
display: inline; 
}

Answer 1

现在您的 CSS 目标是 <login> DOM 中的元素和 <login>具有 input 类的元素。我相信您正在尝试做的是将 login 类和表单内部的元素作为 login 类的目标。尝试像这样修改您的 CSS:

.login {
    position:absolute;
    top:10px;
    left:185px;
}

.login input { 
    display: inline; 
}

JSFiddle