如何使用 CSS 使搜索栏响应式答案

【问题标题】：How to make search bar responsive using CSS如何使用 CSS 使搜索栏响应式
【发布时间】：2015-01-20 09:41:48
【问题描述】：

我的网站页面上有一个搜索栏http://positivelynuts.co.uk/blog/

它仅在移动设备上显示一半宽度并且看起来很小。如何使用 CSS 使其具有响应性，以便它在手机上占据全角并位于分页页面链接上方？

<div class="blogpage_search" style="width: 50%; float:left;">
<form role="search" method="get" id="searchform" class="searchform" action="http://positivelynuts.co.uk">
<div class="search-form">
<input type="text" value="" name="s" id="s">
<input type="submit" id="searchsubmit" value="Search">
</div>
</form>
</div>

【问题讨论】：

<div class="blogpage_search" style="width: 100%; float:left;">
如果你想我帮你做一个搜索框，请使用引导程序

标签： css wordpress responsive-design

【解决方案1】：

首先取出 style="width: 50%; float:left;" 元素并将其添加到您的 css 文件中：

.blogpage_search {
   width: 50%;
   float: left;
   margin-top: 7px;
}

@media screen and (max-width: 600px) {
   .blogpage_search {
      float: none;
      width: 100%;
      margin: 10px auto;
   }
}

这应该可以解决问题！谢谢！

【讨论】：

【解决方案2】：

使用width:100%;

<div class="blogpage_search" style="width: 100%; float:left;">

【讨论】：