CSS - あなたは何が起こっているのを見ることができるように、私はバイオリンを設定したテキスト入力

Question

内部のアイコンでFontAwesomeアイコンを並べる：https://jsfiddle.net/5p9ve8xr/1/

社会のように3私は何をしようとしているが、それ作るれますメディアのアイコン（.fa-linkedin、.fa-twitter、.fa-facebook）水平に検索アイコン（.fa-search）

の中心に合わせるには、ソーシャルメディアのアイコンはすべて、.socialのクラスを持っています。そこで、パディングとマージンを使用してターゲット設定を試みました。

.social { 
    margin-top: 20px; 
} 

しかし、これはすべての要素を20ピクセル下げるだけです。

ポイントを説明するためのスクリーンショットを添付しました。私は緑とマゼンタの占有スペースの量が等しくなるように、アイコンが欲しい - アイコンが検索入力の中心に正確にされている。すなわち： - 場合に

ここでは、コードのコピーがありますそれがどの時点でjsfiddleではありません...

マークアップ：

<div class="row"> 
     <div class="col-md-12" style="border:1px solid red"> 
       <form action="#" class="form-inline"> 
        <div class="form-group"> 
         <input type="text" size="30" placeholder="Search" class="form-control input-lg"> 
         <i id="filtersubmit" class="fa fa-search fa-2x"></i> 


         <a href="#" target="_blank"><i class="fa fa-linkedin fa-2x social" aria-hidden="true"></i></a> 
         <a href="#" target="_blank"><i class="fa fa-twitter fa-2x social" aria-hidden="true"></i></a> 
         <a href="#" target="_blank"><i class="fa fa-facebook fa-2x social" aria-hidden="true"></i></a> 
        </div> 
       </form> 
     </div> 
    </div> 

CSS：

#filtersubmit { 
    position: relative; 
    z-index: 1; 
    left: -42px; 
    top: 5px; 
    color: #7B7B7B; 
    cursor:pointer; 
    width: 0; 
} 

の

図書館：

• ブートストラップ3.3.7
• FontAwesome
• jqueryの1.12.4

Answer 1

私はおそらく今まで、それほどわずか

.form-search--social { 
 
    float: right; 
 
    padding: 8px 12px; 
 
}

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

 
<div class="row"> 
 
\t <div class="col-md-12" style="border:1px solid red"> 
 
\t \t <form action="#" class="form-inline form-search"> 
 
\t \t \t <div class="form-group"> 
 
\t \t \t \t <div class="input-group"> 
 
\t \t \t \t \t <input type="text" size="30" placeholder="Search" class="form-control input-lg"> 
 
\t \t \t \t \t <span class="input-group-addon"> 
 
\t \t \t \t \t \t <i id="filtersubmit" class="fa fa-search fa-2x"></i> 
 
\t \t \t \t \t </span> 
 
\t \t \t \t </div> 
 
\t \t \t \t 
 
\t \t \t \t <div class="form-search--social"> 
 
\t \t \t \t \t <a href="#" target="_blank"><i class="fa fa-linkedin fa-2x fa-fw social" aria-hidden="true"></i></a> 
 
\t \t \t \t \t <a href="#" target="_blank"><i class="fa fa-twitter fa-2x fa-fw social" aria-hidden="true"></i></a> 
 
\t \t \t \t \t <a href="#" target="_blank"><i class="fa fa-facebook fa-2x fa-fw social" aria-hidden="true"></i></a> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </form> 
 
\t </div> 
 
</div>

あなたの構造を調整します

そして、それはSOsのコードボックスで変わったので、潜在的な混乱を避けるために、最終結果のBootplyがあります：https://www.bootply.com/dmC7mKGr1L