显示后在媒体查询中浮动不适用于输入：块

Question

使用以下代码，当视口大于 320px 时，输入应与文本在同一行。它在第一个页面加载时按预期工作（当媒体查询被激活时），但在视口调整到 320px 以下后，float: left 将不再工作，即使视口再次放大。

视口 >= 320px 时的预期结果

调整视口大小后 < 320px

将视口大小调整回 >= 320 像素时的结果

仅当满足以下条件时才会出现此行为：

我在 Ubuntu 14.04 上使用 Chrome 41.0.2272.101（64 位）。该行为不会在同一平台上的 Firefox 38.0 中出现。我没有测试过任何其他浏览器。

.text {
  display: inline-block;
}
input {
  display: block;
}
@media only screen and (min-width: 320px) {
  input {
    float: left;
  }
}

<div class="text">Text</div>
<input type="text">

您可以在这里尝试一下：https://jsfiddle.net/ws2guLrq/1/

Answer 1

这可能是您要查找的内容，请改用 max-width 并切换参数。

.text {
    display: inline-block;
}
input {
    float: left;
}
@media only screen and (max-width: 319px) {
    input {
        float: none;
    }
}

如果我正确理解了你的问题，那么这就是你想要的，我只在 Chrome 中测试过。

Float within media query not working on input after display: block