Question

我正在创建一个HTML页面，但我遇到了一个大问题：调整浏览器大小。当我调整浏览器大小时，我的网页中的元素会从您的位置移开。我的HTML代码是下一个：

<body>
<div class="wrap">
    <div class="header">
        <form class="form">
            <label>E-mail </label><input >
            <label>Password </label><input >
        </form>
    </div>
</div>

我的CSS代码是下一个：

.wrap{width:100%;}
.header{background-color:#046b5b; width: 100%; height: 5em;}
.form{position:relative; top:50%; float: right;}

我该怎么办？

Answer 1

快速执行此操作的方法是在包装容器上设置最小宽度，这样当宽度变低时，您将永远不会看到两个元素重叠。

IE：

.wrap{width:100%; min-width:600px;}

例如：http://jsfiddle.net/8w3Am/

Answer 2

我想以一种快速不同的方式添加解决此问题，同时也让您的网站仍然具有响应能力。这是代码：

<强> HTML

<div class="wrap">
    <div class="header">
        <form class="form">
            <label class="entry"> <span>E-mail</span>
                <input placeholder="Email Address" />
            </label>
            <label class="entry"> <span>Password</span>

                <input placeholder="Password" />
            </label>
        </form>
    </div>
</div>

<强> CSS

.wrap {
    width:100%;
}
.header {
    background-color:#046b5b;
    width: 100%;
    height: 5em;
    min-width: 200px;
}
.form {
    position:relative;
    display:inline-block;
    top:50%;
    float: right;
}
.entry {
    display:inline-block;
}

@media screen and (max-width: 460px) {
    span {
        display:none;
    }
    form {
        text-align:center;
        margin: 0 auto;
    }
    .header {
        height:7em;
    }
}

<强>结论

我在你的HTML中改变了一些东西，正如你所看到的那样，但它根本不是一件轻而易举的事。我添加了一个占位符，当浏览器变小时，用户仍然确切地知道输入字段内部的内容，而不是需要那里的标签来抛弃输入的对齐。

我添加了一个CSS媒体查询来检查屏幕大小何时达到某个点，在这个例子中我只使用了460px，但你可以随时调整它以满足你的需求。基本上，如果用户点击该屏幕大小，它将激活该块中的所有CSS。对于这个问题，我用它来隐藏标签文本，延长包装器的高度以避免高度不一致，同时还将输入字段对齐到彼此正下方。

旁注

我决定添加所有这些效果，因为在所有现实中，您都希望尽可能让您的网站尽可能移动友好，而不会破坏您网站的真正美感。如果您不喜欢它，那没关系，但请记住，响应式网站真的很棒。它表明您已适应所有屏幕尺寸，可能适用于所有潜在的浏览器。

另外，请注意我在代码中添加了min-width，因此当您重新调整JSFiddle窗口的大小时，您仍然可以在提供的最小宽度上滚动。

<强> DEMO JSFiddle

如何在调整浏览器大小时阻止HTML元素移动？

2 个答案: