フローティング要素の水平および中央表示を完全に実現_基本チュートリアル

コンテンツの複数の異なる領域を連続して表示するページ レイアウトが、ページに対して中央に配置されていることがよくあります。これらの領域のコンテンツはテキストだけではなく、画像や他の要素が混在する場合もあります。一般に、このようなレイアウトではフローティング フロートを使用することが考えられますが、中央揃えでローエンド ブラウザと互換性を持たせるにはどうすればよいでしょうか?ぜひ読んでください。

まず html コードを見てください:

<div class="webfooter">
  <div class="wrap">
    <div class="tabs">
      <ul>
        <li>
          <a href="javascript:void(0)">高大上平台</a><em>|</em>
        </li>
        <li>
          <a href="javascript:void(0)">关于我们</a><em>|</em>
        </li>
        <li>
          <a href="javascript:void(0)">联系我们</a><em>|</em>
        </li>
        <li>
          <a href="javascript:void(0)">服务条款</a><em>|</em>
        </li>
        <li>
          <a href="javascript:void(0)">人才招聘</a><em>|</em>
        </li>
        <li>
          <a href="javascript:void(0)">帮助中心</a><em>|</em>
        </li>
        <li>
          <a href="javascript:void(0)">帮助中心</a><em>|</em>
        </li>
        <li>
          <a href="javascript:void(0)">帮助中心</a><em>|</em>
        </li>
        <li>
          <a href="javascript:void(0)">帮助中心</a><em>|</em>
        </li>
        <li>
          <a href="javascript:void(0)">客服中心</a>
        </li>
      </ul>
    </div>
  </div>
</div>

これらの項目はすべてテキストであると言う人もいますが、実際には、ul を他の要素 (div など) に置き換えることも可能です。原則として、.wrap はページの中央に配置され、幅は 1200 ピクセルです。もちろん 1000 ピクセルにすることもできます。幅はコンテンツの幅より大きい限り、自由に定義できます。次に、 .tabs は left に float して、position:relative; left: 50%; を設定し、その内部要素 ul に float: left;position:relative; left: -50%; を設定します。最後に、 overflow: hidden; *position を に追加します。ラップ : 相対;

css コードは次のとおりです。

<style type="text/css">
body, ul, li, ol, dl, dt, dd {padding: 0; margin: 0; list-style: none;}
.webFooter {height: 100px; font-size: 12px; background: #278ed1; font-family: Microsoft YaHei; color: #fff;}
.webFooter a,
.webFooter a:hover {color: #fff;}
.webFooter .wrap {width: 1200px; margin-left: auto; margin-right: auto; background: red; overflow: hidden; *position: relative;}
.webFooter .tabs {float: left; position: relative; left: 50%; margin-top: 25px;}
.webFooter .tabs ul {float: left; position: relative; left: -50%;}
.webFooter .tabs li {float: left; line-height: 17px;}
.webFooter .tabs a {float: left; font-size: 14px;}
.webFooter .tabs em {float: left; width: 20px; height: 15px; *line-height: 15px; text-align: center;}
</style>

overflow: hidden; *position:relative; を .wrap に追加する必要がある理由を説明してください。理由は、コンテンツが比較的長い場合、.tabs の left:50%; により、その位置が .wrap の幅の範囲を超えてしまい、表示が少し小さい場合、ページ上に横スクロール バーが表示されます。 ie7 はより頑固であるため、 *position を追加する必要があります。 :相対; のみ機能します。興味のあるユーザーは、overflow: hidden; を削除して試してみてください。

最後に、ul を

に変更します (css を .inner: float: left; position:relative; left: -50%; と書きます)。これで、.inner typesetting (例: qr コードの画像、カスタマー サービスの電話番号とアイコン、weibo へのリンクなど)。