Alignement désordonné des mes blocks <li>

Bonjour,

Je ne comprends pas pourquoi mes images sur la page d'accueil de mon site (www.alexis-velasco.com) les balises <li> ne se mettent pas côte à côte. C'est la première fois que j'ai un problème de ce genre - je suis perplexe.

Voici le CSS :

.information
{
	color :  black;
}
	
.bloc_page_index  
{
	width : 100%;
	margin : auto ;
	color : white ;
	height : 50em;

}


.bloc_page_index  p
{
	text-align : center ;
	font-size : 1.2em;
	color : grey ;
}	
	
	
.lien_galeries_index 
{
	width : 70%;
	margin : auto ;
	border : solid 1px blue;
	text-align : center ;
	color : white ;
	display : block;
}	
	
.lien_galeries_index li:hover p
{
  color : #0186ba ;
}

 .lien_galeries_index li 
 {
    width:5em;
    float:left;
    margin:20px;
	display : inline-block;
	background:white;
		border: solid 1px red;
 }
 

.lien_galeries_index ul 
{
    width : 100%;
	margin : auto;
}

 .lien_galeries_index p 
 {
 	font:  "existence","lucida grande", arial, sans-serif;
    color:black;
    background:white;
	text-align : center ;
	font-size : 1.1em;
	color : grey ;
}


.lien_galeries_index img
{
	width : 100%;
}

et voici le HTML :

				<div class="lien_galeries_index">
			 
					<ul>
						
						<li>
							<a href="galerie_paysage.php#ancre" ><img src="photos/index/tirages.jpg" alt="photographe Lyon voyage" />
								<p>Voyage photographique</p>
							</a>
						</li>
						<li>
							<a href="engagement.php"><img src="photos/index/engagement.jpg" alt="photographe de studio Lyon Paris mariage grossesse" />
								<p> Séances d'engagement</p>
							</a>
						</li>
						<li>
							<a href="galerie_portrait.php#ancre" ><img src="photos/index/portrait.jpg" alt=" photographe Lyon portraits" />
								
								<p>Portraits</p>
							</a>
						</li>
						
						
						
						
						<li>
							<a href="galerie_mariage.php#ancre" ><img src="photos/index/mariage.jpg" alt="photographe de mariage Lyon Paris" />
								<p>Mariages</p>
							</a>
						</li>
						<li>	
							<a href="tarifs.php#ancre" ><img src="photos/index/type.jpg" alt="photographe de studio Lyon Paris"/>
								<p>Tarifs</p>
							</a>
						</li>
						<li>
							<a href="grossesse.php" ><img src="photos/index/grossesse.jpg" alt="photographe de studio Lyon Paris mariage grossesse" />
								<p>Séance studio : grossesse <br/>
								<span class="information">[En construction ]</span>
								</p>
							</a>
						</li>
						
						
						
						
						<li>
							<a href="galerie_privee.php" ><img src="photos/index/mode.jpg" alt="photographe de studio Lyon Paris mariage grossesse" />
								<p>Galeries privées <br/>
									<span class="information">[En construction ]</span>
								</p>
								
							</a>
						</li>
						<li>
							<a href="projets.php" ><img src="photos/index/projet.jpg" alt="photographe de studio Lyon Paris mariage grossesse" />
								<p>Projets divers <br/>
									<span class="information">[En construction ]</span><br/> 				
								</p>
							</a>
						</li>
					
					</ul>	
						
				</div>

Merci d'avance

Bonjour et bienvenue sur le forum, Valoces

Le problème est vite résolu en abandonnant le float: left au profit d'un display: inline-block

.lien_galeries_index li {
    width: 24%;
    /* float: left; */
    margin: 20px;
    display: inline-block;
    background: white;
}

Modifié par audrasjb (09 Aug 2015 - 14:33)