給客戶做站的時(shí)候遇到的問(wèn)題,div層加了margin后 總寬度超過(guò)父級(jí)層寬度 就自動(dòng)換行了 如何讓浮動(dòng)層加margin后不換行呢?

下面看浮動(dòng)層加margin后換行的例子:

比如說(shuō)有個(gè)DIV寬度為380px，它里面有一個(gè)菜單列表，每個(gè)寬度為60px，margin-right為20px。如果就按照下面的HTML結(jié)構(gòu)來(lái)做的話，那么這個(gè)菜單列表能在這個(gè)DIV里一行顯示完整嗎？

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

5個(gè)菜單，每個(gè)寬度為60px，右邊外補(bǔ)白為20px，因此每個(gè)菜單整體寬度是80px，5個(gè)菜單總長(zhǎng)度為400px，而父級(jí)層寬度只有380px，根據(jù)浮動(dòng)的原理，那么第5個(gè)菜單將毫無(wú)疑問(wèn)的被擠下去即換行了。

看下我的解決方法:

代碼如下:

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

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

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

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