HTML/CSS中<input>定位的问题

1 html css positioning css-position

嘿伙计们,我是一个完整的HTML和CSS noob,当他遇到问题时,他正在编写他的离线网站.

我有一个div,我使用绝对定位定位了几个元素.但是当我尝试定位输入字段时,它不会与其他文本垂直对齐.这是一个例子:

<div id="TopBar">
[...]
<h2 class="SubTitle" style="position:absolute; top:50px; left:75%;">Username: </h2>
<input type="text" name="username" style="display:inline; positon:absolute; top:50px; right: 5%;" />
Run Code Online (Sandbox Code Playgroud)

当我运行此代码时,输​​入字段比"用户名:"大约30像素.为什么会这样,即使两者都有"顶级:50px"?

通过测试,我发现代码正常工作,没有div.这是为什么?

我知道我的编码非常糟糕,请向我解释我做错了什么.

Mat*_*ner 5

您在标记中有拼写错误.修复"位置",这对你有用!