Realisasikan dengan sempurna paparan mendatar dan berpusat bagi elemen terapung

Realisasikan dengan sempurna paparan mendatar dan berpusat bagi elemen terapung_Tutorial Asas

WBOY

Lepaskan： 2016-05-16 12:03:39

asal

1421 orang telah melayarinya

Kami sering menghadapi reka letak halaman yang memaparkan beberapa kawasan kandungan yang berbeza berturut-turut, tetapi ia berpusat berbanding halaman. Ambil perhatian bahawa kandungan dalam kawasan ini bukan hanya teks, tetapi mungkin juga bercampur dengan imej atau elemen lain. Secara amnya, mudah untuk kita memikirkan menggunakan terapung untuk susun atur sedemikian, tetapi bagaimana untuk menyelaraskannya ke tengah dan serasi dengan penyemak imbas rendah? Sila baca.

Pertama lihat kod 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>

Salin selepas log masuk

Sesetengah orang akan mengatakan bahawa semua item ini adalah teks. Malah, ia juga boleh menggantikan ul dengan elemen lain (seperti div). Prinsipnya ialah .wrap dipusatkan berbanding halaman, dan lebarnya ialah 1200px Sudah tentu, lebarnya juga boleh ditakrifkan secara bebas, asalkan ia lebih besar daripada lebar kandungan. Kemudian .tabs terapung ke kiri dan menetapkan kedudukan: relatif; bungkus : saudara;

Kod css adalah seperti berikut:

<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>

Salin selepas log masuk

Terangkan mengapa anda perlu menambah limpahan: tersembunyi; Sebabnya ialah jika kandungan agak panjang, disebabkan oleh sebelah kiri: 50% daripada .tab, kedudukannya melebihi julat lebar .wrap Apabila paparan lebih kecil sedikit, bar skrol mendatar akan muncul pada halaman. dan ie7 lebih degil, jadi *kedudukan mesti ditambah : relatif; Pengguna yang berminat boleh mencubanya dengan mengalih keluar overflow: hidden; *position: relative;, atau menukar kandungan dan mencubanya sekali lagi.

Akhir sekali, tukar ul kepada

(tulis css untuk .inner: float: left; position: relative; left: -50%;) dan anda boleh menulis apa yang anda mahu dalam .inner Reka letak terapung diperlukan (contohnya: gambar kod QR, kemudian nombor telefon dan ikon perkhidmatan pelanggan, kemudian pautan ke Weibo...dsb.).