怎麼讓css不自動換行代碼

浮動層加margin後換行的例子:

比如說有個DIV寬度為380px，它裡面有一個菜單列表，每個寬度為60px，margin-right為20px。如果就按照下面的HTML結構來做的話，那麼這個菜單列表能在這個DIV裡一行顯示完整嗎？

 

  
<div> 
  
    <div>mb5u1</div> 
  
    <div>mb5u2</div> 
  
    <div>mb5u3</div> 
  
    <div>mb5u4</div> 
  
    <div>mb5u5</div> 
  
</div> 
 

5個菜單，每個寬度為60px，右邊外補白為20px，因此每個菜單整體寬度是80px，5個菜單總長度為400px，而父級層寬度只有380px，根據浮動的原理，那麼第5個菜單將毫無疑問的被擠下去即換行了。

看下我的解決方案:

代碼如下:

 

  
<div> 
  
    <div class="overflowDiv"> 
  
       <div>mb5u1</div> 
  
       <div>mb5u2</div> 
  
       <div>mb5u3</div> 
  
       <div>mb5u4</div> 
  
       <div>mb5u5</div> 
  
    </div> 
  
</div> 
 

 父級層寬度380px，遮罩層overflowDiv寬度設定為菜單需要的400px,overflow為hidden。因此，很自然的，遮罩層多出的20像素部分則不會顯示出來。

而菜單就在這400px的寬度裡為所欲為了