Question

我的网站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>

Answer 1

使用width:100%;

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

Answer 2

首先取出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;
   }
}

应该这样做！谢谢！

如何使用CSS使搜索栏响应

2 个答案: