Implémentation CSS multi-navigateurs de l'échange float:center_Experience

Copier le code Le code est le suivant :

>< ul class="macji-skin">

Liste un

Liste deux

li>

Nous espérons que li est flottant et centré (le nombre de li n'est pas fixe et la largeur de ul est inconnue ). Vous pouvez définir le text-align:center de ul, puis définir l'affichage de li pour obtenir le centrage, mais ce n'est pas notre intention initiale. Nous devons implémenter float:center.

Ici, nous devons revoir position:relative, ce qui compensera la position dans le flux normal de documents en fonction des attributs gauche, droite, haut, bas et autres. Ensuite, nous pouvons faire ul position: relative; left: 50%, puis laisser li flotter vers la gauche, puis le faire position: relative: 50% (ou left: -50%), puis li flotte vers le milieu. . Identique au centré. Sans plus tarder, essayons-le d’abord.

Copier le code Le code est le suivant :

#macji{

position:relative ;
largeur : 100 % ;
hauteur : 80 px ;
couleur de fond :#eee ;
alignement du texte ;
débordement :caché
}
# macji .macji -skin{
float:left;
position:relative;
left:50%;
#macji .macji-skin li{
position:relative;
droite : 50 % ;
float :gauche
marge :10px ;
padding :0 10px ; 🎜>}