comment aligner la liste horizontale à l'intérieur div?

J'essaie de centrer mon horizontal < ul> à l'intérieur d'un < div> (la bande jaune dans mon exemple). le balisage est ci-dessous. Je sais que si < li> ne flottait pas alors je pourrais le faire en mettant les marges gauche et droite sur < ul> à "auto", mais je ne trouve pas de moyen de se débarrasser de "float" parce que j'ai besoin de mon < li> être des éléments de bloc afin que je puisse les dimensionner. aidez s'il vous plaît! grâce Konstantin comment aligner la liste horizontale à l'intérieur div?


<html> 
<head> 
    <title></title> 
    <style type="text/css"> 
     .container 
     { 
      background-color: yellow; 
     } 
     .container li 
     { 
      border: solid 1px grey; 
      display: block; 
      float: left; 
      height: 100px; 
      line-height: 100px; 
      list-style-type: none; 
      margin: 5px; 
      text-align: center; 
      width: 100px; 
     } 
    </style> 
</head> 
<body> 
    <div class="container"> 
     <ul> 
      <li><a href="#">x</a></li> 
      <li><div>y</div></li> 
     </ul> 
     <div style="clear: both;"> 
     </div> 
    </div> 
</body> 
</html>

Demo affiché, au nom de OP, à: jsbin.

Source

2010-08-19 akonsu

est un élément de niveau bloc, occupant ainsi toute la largeur du conteneur ... également l'alignement de texte permet d'aligner le texte. Vous pouvez faire quelque chose comme:

.container ul{ 
    width:400px; 
    margin:0px auto 
}

Source

2010-08-19 17:38:25 Zaahid

merci. cela marche. Je préférerais ne pas utiliser la largeur fixe car en général mon < ul> est généré automatiquement et peut contenir une quantité variable d'éléments. – akonsu

Je ne sais pas comment répondre à votre question parce que je ne peux même pas voir la bande jaune FF 3.6.8

mais un coup d'oeil à ce http://www.cssplay.co.uk/boxes/ - il y a beaucoup options et il pourrait vous aider.

Source

2010-08-19 17:46:00 Ken

merci. J'ai édité mon balisage maintenant vous pourrez le voir. – akonsu

Essayez cela, fonctionne sur Firefox et Chrome

<html> 
<head> 
<title></title> 
<style type="text/css"> 
    .container 
    { 
     background-color: yellow; 
     text-align: center; 
    } 
    .container ul 
    { 
     display: inline-table; 
     text-align: center; 
    } 
    .container li 
    { 
     border: solid 1px grey; 
     display: block; 
     float: left; 
     height: 100px; 
     line-height: 100px; 
     list-style-type: none; 
     margin: 5px; 
     text-align: center; 
     width: 100px; 
    } 
</style> 
</head> 
<body> 
<div class="container"> 
    <ul> 
     <li><a href="#">x</a></li> 
     <li> 
      <div> 
       y</div> 
     </li> 
    </ul> 
    <div style="clear: both;"> 
    </div> 
</div> 
</body> 
</html>

Source

2010-08-20 06:03:52

comment aligner la liste horizontale à l'intérieur div?

Répondre

Questions connexes