テキスト内のアイコンをテキストの配置と幅50％で絶対配置する方法

Question

入力を水平に中央に配置し、内側にアイコンが必要です。このような何か：私はこのコードを持っている

は：

.search { 
 
    position: relative; 
 
    text-align:center; 
 
    background-color:#ddd; 
 
    padding:2em 0; 
 
} 
 

 
input[type="search"] { 
 
    text-indent: 2em; 
 
    font-size:1.9em; 
 
    padding:0.2em 0; 
 
    width:50%; 
 
} 
 
\t \t \t 
 

 
.fa-search { 
 
    position: absolute; 
 
    left: 10px; 
 
    top:50%; 
 
    transform: translateY(-50%); 
 
    font-size: 2em; 
 
    color:orange; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<div class="search"> 
 
\t \t \t \t \t 
 
    <i class="fa fa-search" aria-hidden="true"></i> 
 
    <input type="search" class="search-field" placeholder="Buscar" name="s" /> 
 

 
</div>

は私が削除した場合left: 10px;は、Windowsのナビゲーターで罰金ではなく、MACで動作することを確認しました。

アイデア？

Answer 1

参照スニペットを@marcosperezgudeのおかげで解決しました。

.search { 
 
      position: relative; 
 
      text-align:center; 
 
      background-color:#ddd; 
 
      padding:2em 0; 
 
     } 
 
     .search_inner{ 
 
      width:60%; 
 
      position:relative; 
 
      margin:auto; 
 
      
 
      } 
 
    
 
     input[type="search"] { 
 
      text-indent: 2em; 
 
      font-size:1.9em; 
 
      padding:0.2em 0; 
 
      width:100%; 
 
     } 
 
     \t \t \t 
 
    
 
     .fa-search { 
 
      position: absolute; 
 
      left: 10px; 
 
      top:50%; 
 
      transform: translateY(-50%); 
 
      font-size: 2em; 
 
      color:orange; 
 
     }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<div class="search"> 
 
    <div class="search_inner"> \t \t \t \t 
 
    <i class="fa fa-search" aria-hidden="true"></i> 
 
    <input type="search" class="search-field" placeholder="Buscar" name="s" /> 
 
    </div> 
 

 
</div>

Answer 2

コメント

.search { 
 
    
 
    text-align:center; 
 
    background-color:#ddd; 
 
    padding:2em 0; 
 
} 
 

 
.search-inner { 
 
    position: relative; 
 
    display:inline-block; 
 
    width:50%; 
 
} 
 

 
input[type="search"] { 
 
    text-indent: 2em; 
 
    font-size:1.9em; 
 
    padding:0.2em 0; 
 
} 
 
\t \t \t 
 

 
.fa-search { 
 
    position: absolute; 
 
    left: 10px; 
 
    top:50%; 
 
    transform: translateY(-50%); 
 
    font-size: 2em; 
 
    color:orange; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<div class="search"> 
 
    
 
    <div class="search-inner"> 
 
\t \t \t \t \t 
 
    <i class="fa fa-search" aria-hidden="true"></i> 
 
    <input type="search" class="search-field" placeholder="Buscar" name="s" /> 
 
    
 
    </div> 
 

 
</div>

Answer 3

.search { 
 
    position: relative; 
 
    text-align:center; 
 
    background-color:#ddd; 
 
    padding:2em 0; 
 
} 
 
span { 
 
    width:50%; 
 
    display:inline-block; 
 
    position:relative; 
 
    } 
 
input[type="search"] { 
 
    text-indent: 2em; 
 
    font-size:1.9em; 
 
    padding:0.2em 0; 
 
    width:100%; 
 
} 
 
\t \t \t 
 

 
.fa-search { 
 
    position: absolute; 
 
    left: 10px; 
 
    top:50%; 
 
    transform: translateY(-50%); 
 
    font-size: 2em; 
 
    color:orange; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<div class="search"> 
 
<span> \t \t \t \t \t 
 
    <i class="fa fa-search" aria-hidden="true"></i> 
 
    <input type="search" class="search-field" placeholder="Buscar" name="s" /> 
 
</span> 
 
</div>

含むspanタグを追加し、100％に検索入力を設定します。