Réalisez parfaitement l'affichage horizontal et centré des éléments flottants

Réalisez parfaitement l'affichage horizontal et centré des éléments flottants_Tutoriel de base

WBOY

Libérer： 2016-05-16 12:03:39

original

1422 Les gens l'ont consulté

Nous rencontrons souvent des mises en page qui affichent plusieurs zones de contenu différentes à la suite, mais elles sont centrées par rapport à la page. Notez que le contenu de ces zones n’est pas uniquement du texte, mais peut également être mélangé à des images ou à d’autres éléments. Généralement, il nous est facile de penser à utiliser des flotteurs flottants pour une telle mise en page, mais comment l'aligner au centre et être compatible avec les navigateurs bas de gamme ? Veuillez continuer à lire.

Premier coup d'œil au code 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>

Copier après la connexion

Certaines personnes diront que ces éléments sont tous du texte. En fait, il est également possible de remplacer ul par d'autres éléments (comme div). Le principe est que .wrap est centré par rapport à la page, et la largeur est de 1200px. Bien entendu, elle peut aussi être de 1000px. La largeur peut être librement définie, à condition qu'elle soit supérieure à la largeur du contenu. Ensuite, .tabs flotte à gauche et définit position: relative; left: 50%; puis définit float: left: relative: -50%; wrap : relatif;

Le code css est le suivant :

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

Copier après la connexion

Expliquez pourquoi vous devez ajouter overflow: Hidden; *position: relative à .wrap ? La raison en est que si le contenu est relativement long, en raison de la gauche : 50 % ; des .tabs, sa position dépasse la plage de largeur de .wrap. Lorsque l'affichage est légèrement plus petit, une barre de défilement horizontale apparaîtra sur la page, et ie7 est plus têtu, donc *position doit être ajouté : relative ne fonctionne que. Les utilisateurs intéressés peuvent l'essayer en supprimant overflow: Hidden; *position: relative;, ou en modifiant le contenu et en réessayant, je pense que vous aurez un sentiment différent !

Enfin, remplacez ul par

(écrivez du CSS pour .inner : float : left ; position : relative ; left : -50%;) et vous pourrez écrire ce que vous voulez dans .inner. Une mise en page flottante est requise (par exemple : une image d'un code QR, puis un numéro de téléphone et une icône du service client, puis un lien vers Weibo... etc.).