Javascript 在CSS中重新定位文本框_Javascript_Html_Css

Javascript 在CSS中重新定位文本框

javascript html css

Javascript 在CSS中重新定位文本框,javascript,html,css,Javascript,Html,Css,各位早上好, 对不起，我不知道该怎么回答这个问题。我遇到了这个问题，我似乎无法使“您的电子邮件”框和“您的密码”框对齐。当你在全屏预览它时，它将是我想要的方式，但当我缩小屏幕时，它们开始变得怪异。像这样：我想要这样，但要放在大屏幕上这就是大屏幕上发生的事情我希望它们都在一起，在同一个地方。你能帮我吗请访问查看我目前的代码 #top_box { background: grey; height: 50px; left: 80.8%; width:20%; position: rela

各位早上好,

对不起，我不知道该怎么回答这个问题。我遇到了这个问题，我似乎无法使“您的电子邮件”框和“您的密码”框对齐。当你在全屏预览它时，它将是我想要的方式，但当我缩小屏幕时，它们开始变得怪异。像这样：

我想要这样，但要放在大屏幕上

这就是大屏幕上发生的事情

我希望它们都在一起，在同一个地方。你能帮我吗

请访问查看我目前的代码

#top_box
{
background: grey;
height: 50px;
left: 80.8%;
width:20%;
position: relative;
top: 0;
z-index: 5;
}

在两个输入框之间添加换行符

<input ... />
<br />
<input .../>

或将输入设置为

显示：block

[您在css中有一个小错误]

将homeform作为ID调用是css，但在html中，它是一个类，将#替换为。家庭形式之前你也有额外的空格移动框，清理你的html，去掉所有不必要的空格

.homeform
{
    position:relative;
    height:20px;
    width:auto;
}

HTML中存在一些错误，如不必要的间距和无效的标记名。我做得很好。将html替换为以下html代码：

<body>
    <div id="wrapper">
        <div id="top_box">
            <div class="homeform">
                <input type="email" placeholder="Your E-Mail">
                <input type="password" placeholder="Your Password">
                <input type="Submit" value="Login">
            </div>
        </div>
        <div class="background"></div>
        <div id="menu_box"></div>
        <div id="main_box"></div>
        <div id="Bottom_box"></div>
    </div>
</body>

并将

高度

从

#顶框

中移除

这是什么

#top_box {
background: grey;
min-height: 50px;
min-width: 164px;
left: 80.8%;
width: 20%;
position: relative;
top: 0;
z-index: 5;
}

为输入留出足够的空间

希望这有帮助。如果您需要进一步的帮助，请告诉我。

开始时有空间请将其移除…谢谢！！非常helpful@xiiJaMiiE：只需像css中允许的那样为html元素保留足够的空间。给出所需的最小高度和最小宽度