防止多級李水平打破

Question

我有以下代碼創建樹使用李
- 問題：當樹得到大於屏幕寬度的李大到所有樹級別的新線 ，所以我需要爲防止斷力，使頁面滾動

<style> 
    .tree * { 
     margin: 0; 
     padding: 0;   
    } 


    .tree li { 
     float: left; 
     text-align: center; 
     list-style-type: none; 
     position: relative; 
     padding: 20px 5px 0 5px; 
    } 

     .tree li .trcont { 
      width: 140px; 
      border: 1px solid #ccc; 
      padding: 5px 10px; 
      display: inline-block; 
     } 


</style> 

<div class="tree"> 
    <ul id="list"> 
     <li> 
      <div class="trcont">AA11</div> 
      <div class="trchl"> 
       <ul id="lst"> 
        <div class="bfrul"></div> 
        <li id="frstliaax"> 
         <div class="before"></div> 
         <div class="trcont">First LI</div> 
         <div class="trchl"> 
          <ul> 
           <div class="bfrul"></div> 
           <li> 
            <div class="before"></div> 
            <div class="trcont">xxxxxx</div> 
            <div class="trchl"></div> 
            <div class="after"></div> 
           </li> 
          </ul> 
         </div> 
         <div class="after"></div> 
        </li> 

        <li> 
         <div class="before"></div> 
         <div class="trcont">B->3</div> 
         <div class="trchl"> 
          <ul> 
           <div class="bfrul"></div> 
           <li> 
            <div class="before"></div> 
            <div class="trcont">CCCCCCCC</div> 
            <div class="trchl"></div> 
            <div class="after"></div> 
           </li> 
           <li> 
            <div class="before"></div> 
            <div class="trcont">jjjjjjjjjj</div> 
            <div class="trchl"></div> 
            <div class="after"></div> 
           </li> 
          </ul> 
         </div> 
         <div class="after"></div> 
        </li> 

        <li> 
         <div class="before"></div> 
         <div class="trcont">LAST LI</div> 
         <div class="trchl"> 
          <ul> 
           <div class="bfrul"></div> 
           <li> 
            <div class="before"></div> 
            <div class="trcont">AAA</div> 
            <div class="trchl"></div> 
            <div class="after"></div> 
           </li> 
           <li> 
            <div class="before"></div> 
            <div class="trcont">BBB</div> 
            <div class="trchl"></div> 
            <div class="after"></div> 
           </li> 
           <li> 
            <div class="before"></div> 
            <div class="trcont">Last Li XX</div> 
            <div class="trchl"></div> 
            <div class="after"></div> 
           </li> 
          </ul> 
         </div> 
         <div class="after"></div> 
        </li> 

        <li> 
         <div class="before"></div> 
         <div class="trcont">LAST LI</div> 
         <div class="trchl"> 
          <ul> 
           <div class="bfrul"></div> 
           <li> 
            <div class="before"></div> 
            <div class="trcont">AAA</div> 
            <div class="trchl"></div> 
            <div class="after"></div> 
           </li> 
           <li> 
            <div class="before"></div> 
            <div class="trcont">BBB</div> 
            <div class="trchl"></div> 
            <div class="after"></div> 
           </li> 
           <li> 
            <div class="before"></div> 
            <div class="trcont">Last Li XX</div> 
            <div class="trchl"></div> 
            <div class="after"></div> 
           </li> 
          </ul> 
         </div> 
         <div class="after"></div> 
        </li> 
       </ul> 
      </div> 
     </li> 
    </ul> 
</div> 

Answer 1

添加white-space: nowrap;到含ul和改變孩子的顯示li s到 inline-block;。

演示http://jsfiddle.net/5CadG/

#list { 
    white-space: nowrap; 
} 
.tree li { 
    /* float: left; */ /* REMOVD */ 
    display: inline-block; 
    /* rest of your styles */ 
}