Question

我尝试制作一个需要看起来像this的搜索块：

现在我想当有人调整窗口大小时，搜索按钮仍然在同一行，所以我做了：

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％，但它无法正常工作。
在下一行找到换行符和按钮......即使窗口很大......

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：absolute始终相对于最接近的显式相对定位父级。

＆＃13;

*, *: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;
}

＆＃13;

<!-- 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>

＆＃13;

响应宽度有问题

2 个答案: