margin-top無效的解決方法

先上代碼:前端

        <div id="content" style=" width:750px; height:300px; background:#C29A29; margin-top:100px; margin-left:150px;">
            <ul class="clearfloat" style="border-top:#630 solid 2px; border-bottom:#630 solid 2px; padding:2px 0 2px 0; margin-top:10px;">
                <li class="contentNav" ><a href="">我是張三</a></li>
                <li class="contentNav" ><a href="">我是李四</a></li>
                <li class="contentNav" ><a href="">那我只能是王五了</a></li>
            </ul>
        </div>


要實現的效果是一個大概居中的div裏面一排導航,給ul的margin-top不論怎麼設置都是無效,百度之:web

  兩個或多個毗鄰的普通流中的塊元素垂直方向上的 margin 會摺疊
  1.兩個或多個
  說明其數量必須是大於一個,又說明,摺疊是元素與元素間相互的行爲,不存在 A 和 B 摺疊,B 沒有和 A 摺疊的現象。
  2.毗鄰
  是指沒有被非空內容、padding、border 或 clear 分隔開,說明其位置關係。
  注意一點,在沒有被分隔開的狀況下,一個元素的 margin-top 會和它普通流中的第一個子元素(非浮動元素等)的 margin-top 相鄰; 只有在一個元素的 height 是 "auto" 的狀況    下,它的 margin-bottom 纔會和它普通流中的最後一個子元素(非浮動元素等)的 margin-bottom 相鄰。
  3.垂直方向
  是指具體的方位,只有垂直方向的 margin 纔會摺疊,也就是說,水平方向的 margin 不會發生摺疊的現象。
spa

 

這裏感謝前端攻城獅丁小倪在那啥上的回答,不過本人不認識他,估計也@不到,就算了。code

  解決方法:orm

  茴香豆有幾種寫法忘了,這個聽說有四種方法,曉得一種就行,其餘的可能會坑。  blog

  給父級元素加:overflow:hiddenci

相關文章
相關標籤/搜索