Question

大家早上好，

很抱歉不确定如何说出问题。我遇到过这个问题，我似乎无法将“您的电子邮箱”框与“您的密码”框对齐。当你全屏预览时，它将是我想要的，但当我缩小屏幕时，它们开始变得怪异。像这样：

I want it like this but on a big screen 我想要这样但是在大屏幕上

This is what happens on a big screen 这就是在大屏幕上发生的事情

我希望它们在彼此之下并且都在同一个地方。你能帮我吗？

到目前为止，请访问http://jsfiddle.net/xiiJaMiiE/8S5VG/查看我的代码。

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

Answer 1

您的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>

同时从height移除#top_box。

Working Fiddle

Answer 2

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

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

http://jsfiddle.net/8S5VG/1/

或输入display:block

[你在css中犯了一个小错误]

http://jsfiddle.net/8S5VG/2/#update

Answer 3

你调用homeform作为ID是你的css，但在你的html中，它是一个用＃替换＃的类。在homeform之前你还有额外的间距移动框，清理你的html摆脱所有不必要的空间

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

Answer 4

Tyr这个

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

为输入提供足够的空间。

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

在CSS中重新定位文本框

4 个答案: