<输入>有问题HTML/CSS 中的定位

发布于 2024-11-11 05:42:41 字数 521 浏览 1 评论 0原文

嘿伙计们, 我是一个 HTML 和 CSS 菜鸟,当他遇到问题时,他刚刚编写他的离线网站。

我有一个 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%;" />

当我运行此代码时,输​​入字段比“用户名:”向上约 30 像素。为什么会这样,即使两者都有“top:50px”?

通过测试,我发现代码在没有div的情况下可以正常工作。这是为什么?

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

Hey guys,
I'm a total HTML and CSS noob who was just coding his offline website when he ran across a problem.

I have a div in which I have positioned several elements using absolute positioning. But when I try to position an input field, it does not vertically lign up with the other text. Here's an example:

<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%;" />

When i run this code, the input field is about 30 pixels further up than the "Username:". Why is that, even though both have "top: 50px"?

Through testing, I have discovered that the code works properly without the div around it. Why is that?

I know my coding is really bad, please explain to me what I did wrong.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

ζ澈沫 2024-11-18 05:42:42

您的标签中有拼写错误。确定“位置”,它就会为你工作!

You have a spelling mistake in the tag. Fix "position" and it'll work for you!

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文