Question

我正在建立一个网站，但我遇到了一些问题。默认位置是这个 - http://gyazo.com/43fb8851f0b98f0461c05e13fe90382f（对我来说似乎没问题）。但是当一个网站的宽度较小时，会发生类似这样的事情 - http://gyazo.com/27d02e101bcb051faa9c1ab594a8d54a - 一些元素分裂，它们分为2行，所有这些元素都非常接近它们上面的行。我真的无法解决这个问题。可以请任何人帮助我吗？：）

Answer 1

首先在你的蓝色容器中尝试在他的班级中使用overflow:hidden;。而不是尝试给输入提供一些margin-top:10px;。

但老实说，你必须使用媒体查询为你的元素设置更好的风格。

要使用媒体查询，请在头部添加<meta name="viewport" content="width=device-width">。

比在你的CSS中添加所需的媒体查询：像这样

@media screen and (max-width: 600px) {
input {
    width:100%;
}}

当视口宽度低于600px时，此媒体查询将属性更改为输入。尝试

CSS - 不分裂和向下移动的元素

1 个答案: