タイトルと入力をhtmlページの同じ行に配置する方法は？

Question

タイトルと入力をヘッダーの同じ行に配置したいと考えています。しかし、入力フォームをスパンの後に追加すると、フォームは新しい行に表示されます。それはなぜです？私はスパンと入力がインライン要素であり、思った...

<div class="container"> 
 
     <div class="jumbotron"> 
 
     <img src="assets/images/logo.png" id="nttLogo"> 
 
     <span id="websiteTitle">Online Pharmacy</span>  
 
     <input type="text" name="searchPattern" placeholder="name" class="form-control"> 
 
     <p id="websiteSlogan">Drugs and meds on just about anything</p> 
 
     </div> 
 
</div>

編集：私はブートストラップクラスを追加するとき 問題はフォームコントロール HTMLを入力するための新しい行を作成されます素子。ブートストラップスタイリングとタイトルと入力のためのインライン表示の両方をどうすればできますか？

Answer 1

あなたはこのようにしたいですか？

<div class="container"> 
 
     <div class="jumbotron"> 
 
     <img src="assets/images/logo.png" id="nttLogo"> 
 
     <span id="websiteTitle">Online Pharmacy</span>  
 
     <input type="text" name="searchPattern" placeholder="name"> 
 
     <p id="websiteSlogan" style="display:inline-block">Drugs and meds on just about anything</p> 
 
     </div> 
 
</div>