給客戶做站的時候遇到的問題,div層加了margin后 總寬度超過父級層寬度 就自動換行了 如何讓浮動層加margin后不換行呢?

下面看浮動層加margin后換行的例子:

比如說有個DIV寬度為380px，它里面有一個菜單列表，每個寬度為60px，margin-right為20px。如果就按照下面的HTML結(jié)構(gòu)來做的話，那么這個菜單列表能在這個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，根據(jù)浮動的原理，那么第5個菜單將毫無疑問的被擠下去即換行了。

看下我的解決方法:

代碼如下:

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

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

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

如果各位朋友有更好的辦法，希望能在評論中留言告訴我哦。