Aligner une liste horizontalement

mikasa -
Utilisateur anonyme - 2 déc. 2016 à 17:34

Bonjour,
je suis debutante en css :'(
donc voila
je souhaite aligner 4 liste d'elements voici mon code css :

.F1,.F2,.F3,.F4{ 
 display: inline-block ;
 font-size: 12px;
 border : 1px solid red ;
 width:20% ;
 vertical-align: top;
}
.pied-page{
width:100% ;
border : 1px solid red ;
}
et [/contents/498-html-langage html] :

<[/contents/242-introduction-au-dynamic-html-dhtml div] class= "pied-page">
<div class="F1"><!-- 
  --><ul><li><a href=""><h4> Formation </h4></a></li><!--
  --><li><a href=""><h4> Formation </h4></a></li><!--
  --><li><a href=""><h4>Formation </h4></a></li><!--
  --></ul>
</div>
<div class="F2"><!-- 
  --><ul><li><a href=""><h4> Formation </h4></a></li><!--
  --><li><a href=""><h4> Formation </h4></a></li><!--
  --><li><a href=""><h4>Formation </h4></a></li><!--
  --></ul>
</div>

</br>

<div class="F3"><!-- 
  --><ul><li><a href=""><h4> Formation </h4></a></li><!--
  --><li><a href=""><h4> Formation </h4></a></li><!--
  --><li><a href=""><h4>Formation </h4></a></li><!--
  --></ul>
</div>

</br>
  <div class="F4"><!-- 

--><ul><li><a href=""><h4> Formation </h4></a></li><!--
  --><li><a href=""><h4> Formation </h4></a></li><!--
  --><li><a href=""><h4>Formation </h4></a></li><!--
  --></ul>
</div>
  </br></br></br>
bonne journee !!! 


</div>

A voir également:

Alignement horizontal css
Ecran horizontal - Guide
Filtre horizontal excel ✓ - Forum Bureautique
Alignement grid - Forum Windows 10
Alignement tête d'impression canon pixma mg3650 - Forum Imprimante
Css ligne horizontale ✓ - Forum CSS

1 réponse

Réponse 1 / 1

Utilisateur anonyme

Quand tu dis aligner horizontalement, tu veux dire centrer dans la page? Enfin tu as un exemple?

Et pourquoi il y a des commentaires ouvert entre chaque lignes.

mikasa

bonsoir
les commentaires entre les lignes c pour eviter un espace entre les elements

mikasa

je veux un element de la liste a cote de l'autre dans la meme ligne

Utilisateur anonyme

Déjà les commentaires entre les lignes ne servent à rien, il y aura pas d'espace entre les éléments.

Et si j'ai compris tu veux que tout tes li soit l'un à côté de l 'autre et non l'un en dessous de l'autre? Il faut utiliser un float: left ou display: inline-block sur les li

mikasa

bonjour
je voudrais savoir sur quoi je dois applique les display: inline-block

Utilisateur anonyme

Sur les li qui se trouvent dans les ul

Discussions similaires

CSS: Alignement d'une liste <ul>

Ma feuille de style CSS ne s'applique pas ...

Faire une barre horizontale de navigation

adapter la largeur d'une image à la taille de l'écran

Faire sauter 2 lignes avec br (CSS)

Cliquer sur un bouton pour faire apparaitre un paragraphe/image

Votre réponse

Discussions similaires