Alineación de entradas html en la misma línea

¿Alguien puede dar una solución simple sobre cómo alinear entradas de formulario en la misma línea, por ejemplo, muchas veces cuando estoy construyendo un formulario puedo hacer que se alineen uno encima del otro y se ve bien, pero si pongo dos entradas como un textarea/texto al lado de otro texto o un botón, obtengo diferencias de alineación vertical. ¿Hay alguna manera de arreglar esto sin manipular los márgenes y el relleno?Alineación de entradas html en la misma línea

ejemplo:

<style type='text/css'> 
    form{ 
    display:inline; 
    } 
    textarea{ 
    font-size:25px; 
    height:25px; 
    width:200px; 
    } 
    input.button{ 
    height:25px; 
    width:50px; 
    } 
</style> 
<form> 
    <textarea >Value</textarea><input type='button' class='button' value='Go'> 
</form>

Fuente

2011-12-20 Ryan Stortz

asegúrese usted no tiene claro: dejó en algún lugar – zok

Ha intentado jugar con la propiedad CSS vertical-align?

vertical-align:top;

De esta manera todo se verá coherente y no tendrá que jugar con los márgenes.

Fuente

2011-12-20 14:43:59 Rondel

textarea,input.button{display:inline-block;}

textarea,input.button{float:left;}

una serie de opciones dependiendo de la manera en que su desafiado verticalmente

Fuente

2011-12-20 14:43:18

gracias, pero puedo ponerlos en la misma línea, es solo que cuando lo hago, son yo n diferentes lugares verticalmente. Probé ambos de todos modos y no importó. –

¿Qué alineación quieres? tapa o fondo al ras? –

Además, asegúrese de tener un tipo de documento válido y también haga que la forma sea un elemento de bloque, ya que obtendrá resultados más confiables. –

<table> 
    <tr> 
    <td><input /></td> 
    <td><input /></td> 
    </tr> 
</table>

Claro, que hace que el CSS se retuercen puristas, pero es ciertamente fácil ...

Fuente

2011-12-20 14:44:04 ShaneBlake

Y los puristas de HTML, y los puristas de JavaScript, y los desarrolladores web en general ... – David

traer a los enemigos ... – ShaneBlake

Me gusta esta idea, sin embargo, estoy tratando de alejarme de las tablas de esta página debido a todo el contenido siendo cargado –

Adición de un vertical-align parece work for me:

<style type='text/css'> 
    form{display:inline;} 
    textarea{width:200px;height:25px;font-size:25px;vertical-align:middle} 
    input.button{width:50px;height:25px;vertical-align:middle} 
</style> 
<form><textarea >Value</textarea><input type='button' class='button' value='Go'></form>

Fuente

2011-12-20 14:44:42 David

Eso es genial. Espero que funcione entre navegador –

@RyanStortz: No puedo decir con certeza. Estoy en Firefox 8.0 aquí. Parece que funciona en IE 9.0 también.(Aunque en este último hay botones de desplazamiento en el 'textarea' que es feo, es posible que desee eliminarlos explícitamente para los navegadores que los agregan de forma predeterminada.) – David

Sí, está funcionando para mí. Tengo una función js simple que aumenta la altura del área de texto para cada salto de línea, así que no hay problema. –

normalmente se puede utilizar display:inline-block; o float:left; ¿Estás ¿Quieres que los elementos se alighed en la parte superior o inferior?

En su ejemplo no ha cerrado el tipo de entrada, debe ser type='button' - le falta un apos.

Fuente

2011-12-20 14:45:09

acaba de dar float:left al área de texto

http://jsfiddle.net/2qdJc/2/

Fuente

2011-12-20 14:46:04

Realmente tengo algo en contra de las carrozas, me parecen muy aleatorias, pero gracias creo que puedo hacerlo funcionar ahora. –

Usted puede hacer algo como esto (trabajado en mi caso):

<div style="width:150px"><p>Start: <input type="text" id="your_id"></p> 
    </div> 

<div style="width:130px;margin-left: 160px;margin-top: -52px"> 
<a href="#" data-role="button" data-mini="true">Button</a> 
</div>

Aquí es una demostración: http://jsfiddle.net/gn3qx6w6/1/

Fuente

2014-09-30 08:20:24

Ejemplo simple y agradable. Gracias. –

Alineación de entradas html en la misma línea

Respuesta

Cuestiones relacionadas