html - shell 内的响应式搜索框和元素

我在为移动网站创建具有搜索功能的响应式框时遇到麻烦。我打算在此网站上添加jquery函数，因此我想创建一个外壳，然后在外壳内放置一个唯一的logo元素和一个唯一的search元素。当我运行此代码时，搜索框出现高度问题。我希望高度能够响应，而不是一成不变。

HTML：

<head>
    <meta charset="utf-8">
</head>

<body>

    <style type="text/css">
*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.outer-top{
    border: 1px solid black;
    }

.logo {
    border:1px solid black;
    text-align:center;
    float:left;
    width:25%;
    height: 15%;
    }
.searchbar {
    border:1px solid black;
    text-align:center;
    float:left;
    width:75%;
    height:15%;
    }

    </style>

    <div class="outer-top">
            <div class="logo">
                <p>logo</p>
            </div>
            <div class="searchbar">
                <input type="text" name="search"><input type="submit" value="Search" class="sbutton">
            </div>
    </div>



</body>
</html>

最佳答案

尝试这个

.outer-top{
   border: 1px solid black;
   height:400px;
}

您的上顶div需要指定高度。就我自己而言，我的是400px

关于html - shell 内的响应式搜索框和元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22526923/