1

ページのセクションにギャップが生じている原因を診断するのに問題があります。SOとGoogleを検索しましたが、役立つ記事を特定できませんでした。タイトル、順序付けされていないリスト、および情報を含むdivを含むコンテナがあります。問題は、divとulの間にギャップが発生していることです。divをスペースなしでulの真下に配置したいと思います。例はここで見ることができます：http：//jsfiddle.net/aAfU5/1/（IE7を思い出してください）

HTML

<div id="center-panel">
  <h1>Information</h1>
    <ul class="clearfix">
      <li class="bg1 border2">Regulation</li>
      <li class="bg1 border2">Compliance</li>
      <li class="bg1 border2">Resources</li>
    </ul>
    <div id="information-panel" class="border2">
      This is where the content goes
    </div>
  </div>

CSS：

    #center-panel {
        height: 300px;
        float: left;
        width: 78%;
        padding: 5px;
    }

    #center-panel ul {
        padding: 0px;
        margin: 0px;
    }

    #center-panel li {
        color: white;
        /*display:inline-block;*/
        /*display:inline;*/
        float: left;
        font-weight: bold;
        list-style-type: none;
        margin: 0px 2px;
        padding: 3px;
        width: 100px;
    }

    #information-panel {
        clear: both;
        margin: 0px 2px;
    }

    h1 {
        margin: 0 0 10px 0;
        padding: 0;
        font-size: 120%;
        color: #01305E;
    }

    .bg1 {
        background: #3C698E;
    }

    .border2 {
        border: 1px solid #01305E;
    }
4

1 に答える 1

3

ulの下に「こぼれる」のはH1マージンです。パディングと交換してください：

h1 {
  margin: 0;
  padding: 0px 0px 10px 0px;
  font-size: 120%;
  color: #01305E;
}

ズームを追加して、haslayoutをトリガーすることもできます

#center-panel ul {
  padding: 0px;
  margin: 0px;
  zoom:1;
 }
于 2012-04-28T12:03:47.303 に答える