Aligner une liste horizontalement

.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>