Tutorial zur horizontalen und zentrierten Darstellung schwebender Elemente

Dieser Artikel teilt Ihnen den Code mit, der die horizontale und zentrierte Anzeige von schwebenden Elementen perfekt implementiert und mit allen gängigen Browsern kompatibel ist. Er ist sehr einfach und praktisch.

Wir stoßen häufig auf Seitenlayouts, die mehrere verschiedene 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.

Erster Blick auf den HTML-Code:

<p class="webFooter">
  <p class="wrap">
    <p 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>
    </p>
  </p>
</p>

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

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>

Erklären Sie, warum Sie overflow hinzufügen müssen: *position: relative; was soll .wrap ? 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 es hinzufügen. inner Schreiben Sie das gewünschte schwebende Layout (zum Beispiel: ein Bild eines QR-Codes, dann eine Kundendienst-Telefonnummer und ein Symbol, dann einen Link zu Weibo usw.).

Das obige ist der detaillierte Inhalt vonTutorial zur horizontalen und zentrierten Darstellung schwebender Elemente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!