移动搜索按钮问题中的响应式顶部栏搜索框

Question

我按照互联网上的指南在我的导航栏顶部实现了一个搜索栏和响应式，但是我在使用移动设备查看时遇到了问题，我的搜索框按钮在我的搜索框下方。

像这样。

这是我在 HTML

中的代码

<div class="search-container">
    <form action="/">
         <input type="text" placeholder="seach..." name="search">
         <button type="submit"><i class="fa fa-search"></i></button>
    </form>
</div>

和我的css

    .topnav .search-container {
      float: right;
    }
    
    .topnav input[type=text] {
      padding: 6px;
      margin-top: 8px;
      font-size: 17px;
      border: none;
    }
    
    .topnav .search-container button {
      float: right;
      padding: 6px 10px;
      margin-top: 8px;
      margin-right: 16px;
      background: #ddd;
      font-size: 17px;
      border: none;
      cursor: pointer;
    }
    
    .topnav .search-container button:hover {
      background: #ccc;
    }
    
    @media screen and (max-width: 600px) {
      .topnav .search-container {
        float: none;
      }
      .topnav a, .topnav span, .topnav input[type=text], .topnav .search-container button {
        float: none;
        display: block;
        text-align: left;
        width: 100%;
        margin: 0;
        padding: 14px;
      }
      .topnav input[type=text] {
        border: 1px solid #ccc;  
      }

如何使移动视图中的按钮位于搜索框右侧旁边的同一行？

Answer 1

display: block; 使输入和按钮都“在后面加上换行符”，而且它们都是 width: 100%; 这对两个元素都不利，如果你使它们成为内联块 (默认情况下它们已经是） 并设置两者都适合的宽度，它们彼此相邻。

例如像这样：

body, html { /* just example */
  margin: 0;
  padding: 0;
  background-color: grey;
}

.topnav:after { /* clearfix so the .topnav container keeps its size properly */
  content: "";
  clear: both;
  display: table;
}

.topnav .search-container {
  float: right;
}

.topnav input[type=text] {
  padding: 6px;
  margin-top: 8px;
  font-size: 17px;
  border: none;
}

.topnav .search-container button {
  /* no need for float: right; here, you can comment-out the whitespace in html */
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
  text-align: center;
  /* non-flex version require harcoded width (unless you correct it with javascript) */
  width: 40px;
}

.topnav .search-container button:hover {
  background: #ccc;
}

@media screen and (max-width: 600px) {
  .topnav .search-container {
    float: none;
  }

  .topnav .search-container input[type=text] {
    border: 1px solid #ccc;
    padding: 14px;
    /* padding (left+right), border (left+right), button width */
    width: calc(100% - 28px - 2px - 40px);
    /* bit easier like that: */
    /* 
    box-sizing: border-box;
    width: calc(100% - 40px);
    */
  }
  
  .topnav .search-container button {
    margin-right: 0;
    /* correcting height difference between input[type=text] with border and button without border */
    padding: 15px 14px;
  }
}

<div class="topnav">
  <div class="search-container">
    <form action="/">
      <input type="text" placeholder="seach..." name="search"><!--
      --><button type="submit"><i class="fa fa-search">...</i></button>
    </form>
  </div>
</div>

这种方法有一个主要的缺点，那就是需要硬编码按钮的宽度。

另一种方法是使用position: absolute;，老式但简单，例如这样：

// little demonstation of variable width
var times = 4;
setInterval(function(){
    document.querySelector('button>i').innerText = '.'.repeat(times++);
  if(times>6){ times = 3; }
}, 1000);

body, html { /* just example */
  margin: 0;
  padding: 0;
  background-color: grey;
}

.topnav:after { /* clearfix so the .topnav container keeps its size properly */
  content: "";
  clear: both;
  display: table;
}

.topnav .search-container {
  float: right;
}

.topnav input[type=text] {
  padding: 6px;
  margin-top: 8px;
  font-size: 17px;
  border: none;
}

.topnav .search-container button {
  /* no need for float: right; here, you can comment-out the whitespace in html */
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
  text-align: center;
}

.topnav .search-container button:hover {
  background: #ccc;
}

@media screen and (max-width: 600px) {
  .topnav .search-container {
    float: none;
  }

  .topnav .search-container input[type=text] {
    border: 1px solid #ccc;
    padding: 14px;
    box-sizing: border-box;
    width: 100%;
  }
  
  .topnav .search-container button {
    position: absolute;
    top: 0;
    right: 0;
    margin-right: 0;
    /* correcting height difference between input[type=text] with border and button without border */
    padding: 15px 14px;
  }
}

<div class="topnav">
  <div class="search-container">
    <form action="/">
      <input type="text" placeholder="seach..." name="search"><!--
      --><button type="submit"><i class="fa fa-search">...</i></button>
    </form>
  </div>
</div>

或者你可以使用 flex-box，它更现代更灵活，例如：

// little demonstation of variable width
var times = 4;
setInterval(function(){
    document.querySelector('button>i').innerText = '.'.repeat(times++);
  if(times>6){ times = 3; }
}, 1000);

body, html {  /* just example */
  margin: 0; padding: 0;
  background-color: grey;
}

.topnav:after { /* clearfix so the .topnav container keeps its size properly */
  content: "";
  clear: both;
  display: table;
}

.topnav .search-container {
  float: right;
}

/* following two blocks are most imporant */
.topnav .search-container form {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
}

.topnav .search-container input[type=text] {
  flex-grow: 1;
  flex-shrink: 1;
  min-width: 0;
}

.topnav input[type=text] {
  padding: 6px;
  margin-top: 8px;
  font-size: 17px;
  border: none;
}

.topnav .search-container button {
  /* no need for float: right; here, you can comment-out the whitespace in html */
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
  text-align: center;
  /* no need for hardcoded width */
}

.topnav .search-container button:hover {
  background: #ccc;
}

@media screen and (max-width: 600px) {
  .topnav .search-container {
    float: none;
  }
  
  .topnav .search-container input[type=text]   {
    border: 1px solid #ccc;
    padding: 14px;
  }
  
  .topnav .search-container button {
    margin-right: 0;
    padding: 14px; /* height is automatically corrected by flex */
  }
}

<div class="topnav">
  <div class="search-container">
    <form action="/">
      <input type="text" placeholder="seach..." name="search"><!--
      --><button type="submit"><i class="fa fa-search">...</i></button>
    </form>
  </div>
</div>

移动搜索按钮问题中的响应式顶部栏搜索框

responsive top bar search box in mobile search button problem

css

php

responsive