problema con margin left en formulario

PedroRodas · #1 (**permalink**) 15/05/2008, 03:52

Hola tengo una serie de input dentro de un div, y quiero que se alineen con un margin-left:120px; respecto del borde del div.

Código HTML:

<div id=columna1>
<p>Empresa:<input name="EMPRESA" type="text" class="form" id="EMPRESA" size="25"></p>
...
</div>

El problema es que no se alinean respecto del div, sino del texto "Empresa".

En los estilos he puesto

Código HTML:

#columna1 input{margin-left:120px;}

Alguien sabe como solucionarlo?

Mikmoro · #2 (**permalink**) 15/05/2008, 03:56

Eso es porque están dentro del elemento p. Si los sacas fuera se podrá mirar, seguramente poniendo un positioin: relative.

Mikel.

PedroRodas · #3 (**permalink**) 15/05/2008, 04:05

Pero entonces como consigo la siguiente estructura:

Texto input
Texto2 input
Texto3 input

Lo que quiero es que los campos de texto queden alineados respecto del div dando esa apariencia elegante.

Se me está escapando algo, porque en casa lo tengo hexo pero estoy en el trabajo y no lo recuerdo bien, muchas gracias

Mikmoro · #4 (**permalink**) 15/05/2008, 04:40

Siempre hay varias formas de hacer las cosas, todo depende de tu composición, el resto de elementos, etc.

Esta podría ser una de ellas:

Cita:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="es-es">
<head>
<title>PedroRodas</title>
<style type="text/css">
#columna1 {position: relative;}
input {position: absolute;left: 80px;}
label {line-height: 24px;}
</style>
</head>
<body>
<div id=columna1>
<label for="empresa">Empresa: </label><input name="empresa" type="text" class="form" id="empresa" size="25"><br/>
<label for="nombre">Nombre: </label><input name="nombre" type="text" class="form" id="nombre" size="25"><br/>
<label for="direccion">Dirección: </label><input name="direccion" type="text" class="form" id="direccion" size="25">
</div>
</body>
</html>

Mikel.