Bonjour,
 
J'aimerais avoir votre avis concernant un petit problème de mise en page.
Je modifie le contenu de ma page dynamiquement via DOM et j'ajoute une liste déroulante de tailles.
 
Le problème c'est que je n'arrive pas à faire tenir le contenu sur une même ligne, l'ajout de la liste déroulante se fait toujours à la ligne.
 
Voici mon code d'ajout :
 
 
<code>
<script language="javascript">
 
var range=<?=(count($id_article)==0)?1:count($id_article);?>;
function addSlot(){
   
   var up = document.getElementById('slots');
   var dv = document.createElement("div" );
   
 
           dv.innerHTML = '<p><select name="id_article['+range+']" onchange="if(this.options[this.selectedIndex].value>0) addTaille(this.options[this.selectedIndex].value,'+range+');"> <?=generateOptions(0);?> </select> Taille : <div id="taille_'+range+'"><div></div></div> Qte : <input type="text" name="qte[' + range + ']" size="2" maxlength="2" value="1"></p>';
       
   up.appendChild(dv);
   
   
   
   range++;
   up = null;
   dv = null;
   
 
}
function addTaille(id_article,range){
 
var tailles = new Array;
   
   <?
   // Recuperation de toutes les tailles pour les articles
   $sql = "SELECT id_article,taille FROM ".$GLOBALS["table_articles"]." NATURAL JOIN ".$GLOBALS["table_tailles"]." ORDER BY id_article,taille";
   $query = mysql_query($sql) or die(mysql_error());
   while($data = mysql_fetch_array($query)){
   ?>
   tailles[<?=$data["id_article"];?>] = "<select name=\"tailles["+range+"]\" id=\"tailles["+range+"]\">";
   <?
    $sql_two = "SELECT DISTINCT taille FROM ".$GLOBALS["table_tailles"]." WHERE id_article='".$data["id_article"]."' ORDER BY taille";
    $query_two = mysql_query($sql_two) or die(mysql_error());
    while($data_two = mysql_fetch_array($query_two)){
    ?>
    tailles[<?=$data["id_article"];?>] += "<option value='<?=$data_two["taille"];?>'><?=$data_two["taille"];?></option>";
    <?
    }
    ?>
    tailles[<?=$data["id_article"];?>] += "</select>";
   <?
   }
   ?>
   var div_article = 'taille_'+range+'';
   var noeud=document.getElementById(div_article).firstChild;
   document.getElementById(div_article).removeChild(noeud);
   
   
   
   var up = document.getElementById(div_article);
   var dv = document.createElement("div" );
     
   dv.innerHTML = tailles[id_article];
       
   up.appendChild(dv);
   
   up = null;
   dv = null;
 
}
 
</script>
</code>
 
Dans le corps de ma page j'ai un div nommé slots :
<div id="slots" style="display:inline;"></div>
 
Il permet d'ajouter via addSlot une nouvelle ligne avec :  
- un select d'article lorsqu'on le change il ajoute le fameux select de tailles
 
C'est cet ajout qui bloque et qui se mets sur la ligne suivante.
 
Quelqu'un aurait une solution ?
 
Bonne journée et merci d'avance

tu rajoutes un div ( display block par defaut) qui contient un p ( block aussi) dans ton div#slots, il et normal qu'il y ait un retour à la ligne.
 
Style les div et p contenus dans #slots, ou utilise des elements inline à leur place.

Désolé pour le retard et merci de ta réponse en effet j'ai remplacé par des spans et tout roule