响应宽度有问题

Question

我试图制作一个需要看起来像 this:

的搜索块

现在我希望当有人调整 window 的大小时，搜索按钮仍会在同一行，所以我做到了：

CSS:

.search {
    background-color: #23507c;
    border: none;
    outline: none;
    font-size: 18px;
    width: 92%
}
#searchButton {
    width: 8%; 
    color: #555555;
    font-size: 16px;
}

HTML:

<div id="search">
<form action="search.php" method="POST">
<span class="glyphicon glyphicon-search" style="font-size: 20px;"></span>
<span style="width: 100%;padding:0;margin:0;">
<input type="text" class="search" name="search" placeholder="search for diamonds" />
<button type="submit" id="searchButton"><span class="glyphicon glyphicon-search"></span>
Search</button>
</form>
</span>
</div>

https://jsfiddle.net/kL1m9a8x/15/

我尝试做的是将输入和按钮插入到一个跨度，该跨度取蓝色块的宽度，除了 glypicon，然后从父元素和按钮提供 80% 的输入20%，但它不起作用。
换行符和下一行中的按钮...即使 window 很大...

Answer 1

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
#search{    
    position: relative;
    margin: 5%;
}


.search-inner{
    display: table;
    width: 100%;
    background-color: #23507c;
 border: none;
 outline: none;
 font-size: 18px;
}
.search-item{
    display: table-cell;
    vertical-align: middle;    
}
.search-item-1{
    width: 82%;
    color: #fff;
}
.search-item-1 .glyphicon{
    position: absolute; top: 50%; left: 10px;    
    -webkit-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
        transform: translate(0,-50%);
}
.search-item-2{
    text-align: right;
}
input,
button{
    border: none;
 outline: none;
 font-size: 18px;
    padding: 10px; 
    display: inline-block;
}
input{    
     background-color: #23507c;
     color: #fff;
     padding-left: 35px;  
     width: 100%;
}
button{
   width: 110px;
}

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

<div id="search">
 <form action="search.php" method="POST">
     <div class="search-inner">
     <div class="search-item search-item-1">
         <span class="glyphicon glyphicon-search"></span>
         <input type="text" class="search" name="search" placeholder="search for diamonds" required />
     </div>
         <div class="search-item search-item-2">
         <button type="submit" id="searchButton"><span class="glyphicon glyphicon-search"></span> Search
       </button>
     </div>
     </div>
 </form>
 
</div>

Answer 2

这是我的做法：

基本上使输入透明，为表单元素赋予颜色并将按钮完全定位在它上面。请注意表单元素上的 position:relative，因为 position:absolute 始终相对于最近的明确相对定位的父元素。

*, *:before, *:after {
  padding:0;
  margin:0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html, body {
  width: 100%;
  height: 100%;
}
form {
  background-color: #23507c;
  display: block;
  padding: 10px 15px;
  width: 100%;
  color: #fff;
  font-size: 16px;
  line-height: 24px;
  position: relative;
}
form input {
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 16px;
  line-height: 24px;
  padding-left: 10px;
}
form button {
  display: block;
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  outline: none;
  height: 24px;
}

<!-- FontAwesome for icons -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>

<!-- relevant code -->
<form action="search.php" method="POST">
   <i class="fa fa-search"></i>
   <input type="text" class="search" name="search" placeholder="search for diamonds" />
   <button type="submit" id="searchButton"><i class="fa fa-search"></i>&nbsp;Search
   </button>
</form>

响应宽度有问题

Having problems with responsive widths

html

css

responsive-design