1行に2つの要素を表示する

Question

私はブートストラップの入力フィールドとフォントの素晴らしいedinアイコンを持っています。現在、アイコンが入力ボックスの下に表示されています。私がしようとしているのは、それらを1行に表示することです。残念ながら、これほど基本的なものなので、私はそれを機能させることはできません。私は要素を浮かべて、インラインブロックや他のものを与えてしまいましたが、これはうまくいきませんでした。 、助けてください：

<div class="col-sm-2"> 
       <input type="email" class="form-control" id="phone" placeholder="Enter Phone" readonly="readonly"><i class="fa fa-pencil" aria-hidden="true"></i> 
      </div> 

Answer 1

あなただけ<i>にコンテナと<i>タグ& align-self: center;にdisplay: flex;を試してみてください。ここで

---

例：

.col-sm-2 { 
 
    display: flex; 
 
} 
 

 
.col-sm-2 > i { 
 
    display: flex; 
 
    align-self: center; 
 
    width: 30px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="col-sm-2"> 
 
    <i class="fa fa-pencil" aria-hidden="true"></i> 
 
    <input type="email" class="form-control" id="phone" placeholder="Enter Phone" readonly="readonly"> 
 
</div>

Fiddle demo

Answer 2

あなたが置くためにアドオンして入力グループを使用することができ、ブートストラップドキュメント（http://getbootstrap.com/css/#forms-inline）によると、アドオン内のアイコン：

<div class="input-group"> 
    <input type="email" class="form-control" id="phone" placeholder="Enter Phone" readonly="readonly"> 
    <div class="input-group-addon"> 
    <i class="fa fa-pencil" aria-hidden="true"></i> 
    </div> 
</div> 

Answer 3

私はcssで簡単な解決策を持っています。まず、新しいクラスを列に追加します。

HTML = >>>

<div class="col-sm-2 myForm"> 
    <input type="email" class="form-control" id="phone" placeholder="Enter Phone" readonly="readonly"><i class="fa fa-pencil" aria-hidden="true"></i> 
</div> 

CSSは= >>>

.myForm .form-control{ 
    float:left; 
    width:calc(100% - 35px); 
} 
.myForm .fa{ 
    float:right; 
    width:30px; 
} 

...ここ はjsfiddle

より良いソリューションのライブデモがあり、これを試してみてください、ブートストラップの形でありますCSS。このリンクに従ってください： http://getbootstrap.com/css/#forms