débordement CSS: liste dans un div

Question

J'ai une galerie d'images et je ne veux pas donner une classe supplémentaire à la troisième élément de la liste:

<div class="row"> 
     <ul class="rowUl"> 
      <li>ssss</li> 
      <li>ssss</li> 
      <li>ssss</li> 
     </ul> 
    </div> 

et css

.row { 
    width: 620px; 
    clear: both; 
    overflow: hidden; 
} 

.rowUl { 
    width: 645px; 
    float: left; 
} 

.rowUl li { 
    width: 220px; 
    float: left; 
} 

mais la troisième liste déroulante de l'article dans l'autre rangée. Comment puis-je résoudre ceci sans classe supplémentaire?

Answer 1

220 * 3 = 660,

rowUL = 645

des thats 15 pixels supplémentaires de poussée vers le bas div flottant.

Solutions:

gagnez de rowUL largeur 660, font la ligne largeur 660

OU:

rendre la largeur de li rowUL 215

Answer 2

Essayez d'augmenter le width de 645px à une plus grande valeur en .rowUl si possible dans votre cas.

Answer 3

Vous avez 3 éléments flottants LI, chaque 220px de large. 3 * 220 = 660, mais la largeur de l'élément contenant n'est que de 645px, de sorte que le troisième ne peut pas entrer à côté du deuxième et tombe à un autre rang au-dessous du premier. Si vous les voulez tous en une ligne, définissez la largeur du fichier .rowUl sur 660px. En outre, je ne sais pas si vous utilisez une sorte de réinitialisation CSS - si vous ne le faites pas, sachez que les marges et les paddings par défaut des éléments UL et LI peuvent également affecter cela. Vous devez les mettre à 0 si vous voulez vous assurer qu'ils ne le font pas.

Answer 4

Vous avez dépassé largeur limite des éléments en ligne par 645px au sein de 660px (chaque 220px pour les trois éléments)

On peut le faire par une largeur croissante de éléments extérieurs plus 660px

Espérons que cela aide
Myra