Un problema tonto...o eso creo

[scorm]

Hola :) !!
Me pasa lo siguiente, en mi aplicación, tengo un contenedor DIV creado de forma dinámica, este contenedor, contiene a su vez, un input text dos botones y otro contenedor. Mi problema (creo que es sencillo pero no lo sé arreglar) es que quiero que me aparezca el contenido del DIV contenedor, en una sóla fila, y ahora mismo me sale en 4 filas, cada elemento en una...

Os pongo la forma en que lo declaro...por si sabeis que le falta:

Código HTML:

  contenedor = document.createElement('div'); 
  contenedor.id = 'modulo_'+num; 
  	
  contenido = document.createElement('input'); 
  contenido.type = 'text'; 
  contenido.name='cap_'+num;
  contenido.onclick = function () {foco=this} 
  contenido.style.backgroundColor='#eeeeee';
  contenido.onfocus = function () {this.style.backgroundColor = '#cccccc';} 
  contenido.onblur = function () {this.style.backgroundColor = '#eeeeee';} 
  contenido.style.display = "block";
  contenedor.appendChild(contenido); 

  contenido = document.createElement('input'); 
  contenido.type = 'button'; 
  contenido.value = 'Borrar Jerarquia'; 
  contenido.name = 'div_'+num; 
  contenido.onclick = function () {confirmar(this)} 
  contenido.style.display = "block";	
  contenedor.appendChild(contenido); 

  contenido = document.createElement('div'); 
  contenido.id = 'cont_'+num; 
  contenido.className='droppable_demo';
  contenido.style.display = "block";
  contenedor.appendChild(contenido); 

  contenido = document.createElement('input'); 
  contenido.type = 'button'; 
  contenido.value = 'Borrar contenedor'; 
  contenido.name = 'b_'+num; 
  contenido.onclick = function () {confirmar_contenedor(this)} 
  contenido.style.display = "block";	
  contenedor.appendChild(contenido); 

He probado añadir la linea:
contenedor.className="linea";

y despues de finir linea:

.linea{float:left;}

Pero nada. La idea es esa, poner los cuatro elementos de mi contenedor (un input, un boton, un div y otro boton) al lado unos de otros, que ocupen solo una linea.

Espero que podais ayudarme... y que tenga solución, porque queda muy feo jejejej

Muchas gracias

[buzu]

agrega display: inline a tu regla CSS.

[scorm]

Muchas gracias por contestarme, pero no me funcionó.... :( Lo he puesto en:
.linea{display:inline;} y como contenedor.style.display='inline';
pero no va de ninguna de las dos formas. Tambien he probado con display:inline-block;
¿algo más que pueda probar?

Gracias

[David]

Yo lo he probado con el inline y funciona perfectamente, fíjate que en el código ya tienes el display:

Código PHP:

    contenido.style.display = "block";  
   

Solo cambia cada uno de ellos por el inline.

[scorm]

Muchas gracias!!!! Es que lo estaba haciendo mal, porque ese display lo estaba dejando como block, y a parte en el css le añadía inline...Gracias a los dos.

Pero ahora me pasa otra cosa y no sé si podreis ayudarme, y es que al ponerse todo en una linea, el DIV que está entre los dos botones (tengo input, boton, div, boton), aparece muyyy pequeño, apenas sale. Yo lo defino de clase droppable_demo y la clase tiene las siguientes propiedades css:

.droppable_demo {
width: 150px;
height: 20px;
background: #fff;
border: 5px solid #ccc;
margin: 0px 1em 1em 0px;
text-align: center;}

.droppable_demo.hover {
border: 5px dashed #aaa;
background:#efefef; }

Y no lo entiendo porque le tengo dado ancho y alto, de hecho, antes no pasaba... ¿?

Gracias por vuestro tiempo

[scorm]

Bueno, no me lo muestra en firefox, pero en IE si que sale, lo que pasa es que más arriba que el resto de la linea, vamos que muestra todas las cosas seguidas menos el contenedor que lo muestra muy pegado al botón de su izquierda y muy arriba...

[scorm]

Bueno, el problema está solucionado. Se le ha quitado lo de display:inline a todos los elementos y se ha creado una clase para los botones y el input text.
La clase de css se ha definido como float:left y ya funciona.

Espero no haberme olvidado de nada, si alquien tiene el mismo problema que no dude en preguntar si no le funciona.

Saludos