内容に関係なく同じ行に要素を強制します

Question

私はここですでに検索し、いくつかの解決策を試しましたが、私の場合はうまくいきませんでした。私はいくつかのHTMLを記載しており、これらの要素はラッパー要素と内部要素の両方を1行で必要とします。 ここではどうやって見えるのか？

のhtml; white-spaceの

<div class="container-fluid"> 
<div class="col-sm-4 col-md-4 col-lg-4"> 
<div class="well"> 
          <ul class="media-list"> 
           <li class="media"> 
            <a class="toggle-area pull-left" href="javascript:void(0);"> 
             <img class="media-object" alt="Mali Sistemler" src="/Content/img/login/mali_hizmetler.png"> 
            </a> 
            <div class="media-body"> 
             <h4 class="toggle-area media-heading"><span style="width: 95%;">Mali Sistemler</span><i class="fa fa-parent-container fa-plus-square pull-right"></i></h4> 
             <div class="container-menus" style="display:none;"></div> 
            </div> 
           </li> 
          </ul> 
         </div> 
         <div class="well">... </div> 
</div> 
<div class="col-sm-4 col-md-4 col-lg-4"> 
<div class="well"> 
          <ul class="media-list"> 
           <li class="media"> 
            <a class="toggle-area pull-left" href="javascript:void(0);"> 
             <img class="media-object" alt="Denetim Sistemleri" src="/Content/img/login/denetim.png"> 
            </a> 
            <div class="media-body"> 
             <h4 class="toggle-area media-heading"><span style="width: 95%;">Denetim Sistemleri</span><i class="fa fa-parent-container fa-plus-square pull-right"></i></h4> 
             <div class="container-menus" style="display:none;"></div> 
            </div> 
           </li> 
          </ul> 
         </div> 
         <div class="well">... </div> 
</div> 
</div> 

Answer 1

の配列は、単一のwhite-spaceに崩壊します。テキストは決して次の行に折り返されません。 <br>タグが高く評価詳細な回答のため

使用white-space:nowrap

更新CSS

.media-body, .media-left, .media-right { 
    display: table-cell; 
    vertical-align: top; 
    white-space: nowrap; /* Add this */ 
} 

の作業フィドル

fiddle code