2つの入力タグがスペースなしで並んでいます

Question

フラットUIとブートストラップを使用して、2つの入力divをHTMLで並べて配置します。私は下の画像を得ることができ、上記私は現在のコードでは、この

<div class="form-group"> 
    <div class="input-group"> 
     <div class="input-group-btn"> 
      <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">State <span class="caret"></span></button> 
      <ul role="menu" class="dropdown-menu"> 
       @foreach ($states as $key => $value) 
        <li value="{{ $states[$key]['id'] }}">{{ $states[$key]['name'] }}</li> 
       @endforeach 
      </ul> 
     </div> 
     <div> 
      <input type="text" class="form-control input-group"> 
     </div> 
    </div><!-- /.input-group --> 
</div><!-- /.form-group --> 

を持っているが、私は、入力ボックスとボタン/ドロップダウンを置き換えたら、彼らは互いの上に積み重ねられてしまいます。

だから基本的に私はあなたがこれを達成するために、フレキシボックスを使用することができます

Currently acchieving this

Answer 1

間隔せずに並んで2つの入力側をしたいです。フレックスボックスyou may loose some browser supportを使用することで、要素間の余白や余白を削除するなどの面倒な方法は避けてください。

この場合、display: flexを入力グループに追加する必要があります。あなたがする必要があるのは、2つの入力ボックス間のパディングを削除している

https://jsfiddle.net/0g3wLohL/1/