UL balise pas de centrage avec margin: 0 auto; style css

Je suis en train de créer un téléavertisseur qui va s'asseoir dans le centre de la div. Fondamentalement, le code ressemble à ceci:

   <div class="cms-pager">
       <ul>
             <li>1</li>
             <li>2</li>
             <li>3</li>
       </ul>
   </div>

Si je spécifie CSS comme ceci:

  .cms-pager {  } 
  .cms-pager ul { background-color: somecolor; margin: 0 auto; }
  .cms-pager ul li { padding: 5px; margin: 3px; }

puis UL habitude de centre de car il a pour largeur/couleur d'arrière-plan à travers toute la div. Je vais tout simplement pas travailler.

Si je spécifie CSS comme ceci:

  .cms-pager {  } 
  .cms-pager ul { width: 200px; background-color: somecolor; margin: 0 auto; }
  .cms-pager ul li { padding: 5px; margin: 3px; }

puis UL est centré sur la page. Le problème est que j'ai eu pour spécifier une largeur fixe: 200px; et si je n'ai que 1 ou 2 liens, c'est exactement dans le centre. Donc, ce n'est pas à moi, j'ai besoin d'UL pour vraiment avoir la largeur effective de la LI balises et exactement spécifié par la largeur.

Si je spécifie CSS comme ceci:

  .cms-pager { margin: 0 auto; } 
  .cms-pager ul { float: left; background-color: somecolor; margin: 0 auto; }
  .cms-pager ul li { padding: 5px; margin: 3px; }

puis UL arrière-plan est gris sous LI 1 - 3. Donc, je sais que la taille est Ok. Mais parce que j'ai eu à utiliser float: left style, il est automatiquement aligné à gauche et ignore div margin: 0 auto style;

Si je spécifie CSS comme ceci:

  .cms-pager { margin: 0 auto; text-align: center } 
  .cms-pager ul {background-color: somecolor; margin: 0 auto; display: inline-block; }
  .cms-pager ul li { padding: 5px; margin: 3px; }

cette version fonctionne pour Firefox, google Chrome, mais pas pour IE6/7 car il ne fonctionne pas correctement avec inline-block;

Est qu'il ya une solution à ce problème? Est la seule solution pour utiliser de différentes balises table, tr, td ou peut-on faire quelque chose avec ça ?

OriginalL'auteur feronovak | 2011-01-28

  1. 6

    Est-ce assez proche? Pas de chars, pas de inline-blocks. Juste plain ol' blocs et s'aligne.

    .cms-pager, .cms-pager ul {
    margin: 0 auto;
}

.cms-pager {
    text-align: center;
}

.cms-pager ul li {
    display: inline;
    width: 10px;
    background-color: gray;
    padding: 5px;
}

    Voici un aperçu.

    LI est sous l'autre. Il est centré, mais pas côte à côte
    Votre dernier extrait était ce que je cherchais à la base de mon code, peut-être que je l'ai lu à tort. Je pense que je sais ce que vous essayez d'atteindre maintenant, donnez-moi quelques minutes pour essayer à nouveau.
    J'ai ajouté ceci à LI: display: inline; margin: 2px;
    Est-ce à faire ce que vous voulez? jsfiddle.net/BoltClock/UKppg
    Super, ça fonctionne

    OriginalL'auteur BoltClock