ブートストラップを使用したli内のインラインコンテンツ

Question

内容がulタグのヘッダーがあります。私はそれらをインラインにすることはできません。画像で完全にそれらをインライン化する

HTML

<div class="navbar-header"> 
    <ul class="nav navbar-nav navbar-right"> 
    <li> 
     <div> 
     <span><img src="1"></span> 
     <p class="p1">row information</p> 
     </div> 
    </li> 
    <li> 
     <div> 
     <span><img src="1"></span> 
     <p class="p1">row information</p> 
     </div> 
    </li> 
    <li> 
     <div> 
     <span><img src="1"></span> 
     <p class="p1">row information</p> 
     </div> 
    </li> 
    </ul> 
</div> 

Here is fiddle

Answer 1

インラインブロックにP1クラスの表示スタイルを設定し、フレックス方向を削除します。このように：

.p1 { 
    display: inline-block 
} 

https://jsfiddle.net/toL6f4h5/

Answer 2

1）すべてのCSSを削除し、ブートストラップのナビゲーション構文を使用しているので、CDNからブートストラップCSSやJSが含まれます。 2）p要素をスパンに変更してください。