返回首页
当前位置: 主页 > 编程语言 > CSS教程 >

css margin 无效不起作用怎么办

时间:2017-12-11 23:13来源:电脑教程学习网 www.etwiki.cn 编辑:admin

在编写 css 样式过程中,有时会遇到css不起作用的情况,无论您怎么修饰,网页就是不变化。css 的属性很多,本文探讨 margin 无效不起作用的情况。

  css margin 无效不起作用举例如下:

  1、css 为:

  <style type="text/css">
    .item{width:950px; }
    .itemList{margin-top:10px;}
    .leftList{width:430px; height:250px; float:left; margin-right:10px; overflow:hidden; border:#d1dadf 1px solid;}
    .rightList{width:426px; height:250px; float:left; overflow:hidden; border:#d1dadf 1px solid;}
  </style>

 

  2、html 为:

  <div class="item">
    <ul class="itemList">
      <li class="leftList">
        <h3>网站产品列表</h3>
        <ul><li>ul li 列表</li></ul>
      </li>
      <li class="rightList">
        <h3>文章文章列表</h3>
        <ul><li>ul li 列表</li></ul>
      </li>
    </ul>
    <div style="margin-top:100px;">margin无效</div>
  </div>

  效果如下图所示:

css margin 无效怎么办

图1

 

  margin无效所在的 div 层虽然加了 margin-top:100px;,但它仍然靠近上面列表的边框,所加的 margin-top:100px 根本没有起作用。

 

  如何才能使 margin 起作用呢?有三种方法,分别如下:

  1、给样式 .itemList 添加 overflow:hidden; 即:

  .itemList{margin-top:10px;overflow:hidden;}

  则 margin无效的 div 层立即下移了 100 像素,如图2所示:

css margin 不起作用

图2

 

  2、给样式 .itemList 添加 width:950px; 即:

  .itemList{margin-top:10px;width:950px;}

  也可以达到方法1的效果,见图2所示。

 

  3、给 margin无效所在的 div 层加 clear:both; 即:

  <div style="margin-top:100px; clear:both";></div>

  也可以达到上面两种方法的效果,见图2。

  除了上面三种方法,可能还有其它方法也有异曲同工之妙,自己可以探究尝试。

------分隔线----------------------------
标签(Tag):css
------分隔线----------------------------
推荐内容
猜你感兴趣