Css 使我的搜索框更便于移动 现在它在桌面上看起来很好，但是对于手机来说，它只是浮在页面的中间，当你尝试键入时，你就看不到你在打字了。

桌面在右上角，供参考。为什么它会移动到中间

    // Search
.block-search {
    display: inline-block;
    .label {
        display: inline-block;
        float: none;
    }
    input {
        border-radius: 50px;
        height: 40px;
        padding-left: 20px;
        padding-right: 44px;
    }
    .control {
        border-top: 0;
        clear:none;
        margin: 0;
        padding: 0;
    }
    .action.search {
        background: #5a5a5a;
        border-radius: 50px;
        height: 34px;
        right: 4px;
        top: 3px;
        width: 34px;
    }
    .search-autocomplete ul:not(:empty) {
        border-color: #c2c2c2;
        border-top: 1px solid #c2c2c2;
    }
    .search-autocomplete ul {
        li {
            border-color: #c2c2c2;
            &:hover {
                background-color: #e5e5e5;
            }
            .amount {
                color: #444;
            }
        }
        .selected {
            background-color: #e5e5e5;
        }
    }
}

---

2019年，使用浮标进行布局既不时尚也不实用。相反，如果您的设计需要更复杂的CSS网格布局，您应该使用flexbox或。您希望使布局尽可能高。在父容器中设置规则，让子容器按照您确定的方式流动

这里有一个简单的例子

设置不能大于视口宽度的父容器宽度 将所有标题内容居中 尽量不要在元素上设置显式高度。相反，使用填充。这将在不同的用户调整字体大小下很好地缩放。 html，正文{margin:0；} .集装箱{ 宽度：960px； 最大宽度：100vw； } 标题{ 填充：0.5em0； 显示器：flex； 证明内容：中心； } .搜索框{ 边框：1px纯色灰色； 边界半径：20px； 填充物：5em 1em； }

---

我们不可能不看你的代码就知道。是的，代码会很好。也许你可以用最小宽度和最小高度来解决这个问题对不起。。让我发布一些代码@tomitheninja@ObsidianAge代码已经发布。