Image à l'horizontal

Bonsoir à vous

j ai ce type de code html:
<h4>Galeries</h4>
<div id="galerie1"><ul>
<li><a href="http://.........." > <img src="http:// .png"/></a>
<a href="http://..... " ><img src="http:// .png"/></a>
<a href="http:// " ><img src="http://.png"/></a></li></ul>
</div>

Je souhaite que les images soient les unes après les autres c est à dire à l horizontale sur ma page
j ai tapé ce css;

#galeries1{font-size:0.8em; font-style:italic; border:thin solid red; }
#galeries1 ul li{margin:3% 0 0 15%; width:100%; height:8%; display: block; border:thin solid green;}
#galeries1 ul li img{margin:0 3% 0 0; width:15%; border:thin solid blue;}
mais les images se placent les unes en dessous des autres
comment procéder dans le css
merci de votre attention

3 réponses

  1. Il faut préciser display: inline pour tous les li et rajouter li à toutes les images sinon ce n'est pas une succession: corriger comme ceci:

    <div>
    <h4>Galeries</h4>
    <ul id="galerie1">
    <li><a href="http://......." > <img src="http:// .png"/></a> </li>
    <li><a href="http://..... " ><img src="http:// .png"/></a> </li>
    <li><a href="http://"... " ><img src="http://.png"/></a></li>
    </ul>

    <ul id="galerie2">
    <li>.....</li>
    <li>.....</li>
    </ul>
    etc.
    </div>

    et en css: ul li{
    display: inline;
    }
    1. merci pour la faute de frappe
      Aussi la methode display: inline ne fonctionne pas non plus
      je suis dans wordpress
      je continue et si vous avez d autres propositions , je suis preneuse
      1. aussi je fais le test sur des pages simple en html
        et le probleme ne se pose pas
        les images se disposent à l horizontale
        je ne comprend pas pourquoi sur wordpress cela ne fonctionne pas en ligne
      2. il faut voir ce que Wordpress ajoute comme code...
    2. tes images sont de type block alors qu'elles devraient être inline, ce qui se vérifie par la présence dans le code de display: block.
      Il suffit d'ajouter dans le css:
      galerie1 ul li{
      display: inline;
      }

      attention à l'orthographe dans le css, ce n'est pas galeries1 mais l'id est galerie1 !!