Realisieren Sie die horizontale und zentrierte Anzeige schwebender Elemente perfekt._Grundlegendes Tutorial-CSS-Tutorial-php.cn

Realisieren Sie die horizontale und zentrierte Anzeige schwebender Elemente perfekt._Grundlegendes Tutorial

WBOY

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

Original

1411 Leute haben es durchsucht

Wir stoßen häufig auf Seitenlayouts, die mehrere unterschiedliche Inhaltsbereiche hintereinander anzeigen, diese jedoch relativ zur Seite zentriert sind. Beachten Sie, dass der Inhalt in diesen Bereichen nicht nur aus Text besteht, sondern auch mit Bildern oder anderen Elementen gemischt sein kann. Im Allgemeinen fällt es uns leicht, für ein solches Layout schwebende Floats zu verwenden, aber wie kann man es zentriert ausrichten und mit Low-End-Browsern kompatibel sein? Bitte lesen Sie weiter.

Schauen Sie sich zunächst den HTML-Code an:

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

Nach dem Login kopieren

Manche Leute werden sagen, dass es sich bei diesen Elementen ausschließlich um Text handelt. Tatsächlich ist es auch möglich, ul durch andere Elemente (z. B. div) zu ersetzen. Das Prinzip ist, dass .wrap relativ zur Seite zentriert ist und die Breite 1200 Pixel beträgt. Natürlich kann die Breite frei definiert werden, solange sie größer als die Inhaltsbreite ist. Dann wird „.tabs“ nach links verschoben und „position: relative; Wrap: relativ;

Der CSS-Code lautet wie folgt:

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

Nach dem Login kopieren

Erklären Sie, warum Sie overflow: versteckt; *position: relative; hinzufügen müssen. Der Grund dafür ist, dass, wenn der Inhalt relativ lang ist: 50 % von .tabs, seine Position den Breitenbereich von .wrap überschreitet. Wenn die Anzeige etwas kleiner ist, wird auf der Seite eine horizontale Bildlaufleiste angezeigt. und ie7 ist hartnäckiger, daher muss *position hinzugefügt werden: relative; Interessierte Benutzer können es versuchen, indem sie overflow:hidden; *position:relative; entfernen oder den Inhalt ändern und es erneut versuchen.

Ändern Sie abschließend ul in

(schreiben Sie CSS für .inner: float: left; position: relative; left: -50%;) und Sie können in .inner schreiben, was Sie wollen Es ist ein schwebendes Layout erforderlich (z. B. ein Bild eines QR-Codes, dann eine Kundendienst-Telefonnummer und ein Symbol, dann ein Link zu Weibo usw.).