Foros del Web » Creando para Internet » CSS »

Ajustar el ancho de caja de texto

Estas en el tema de Ajustar el ancho de caja de texto en el foro de CSS en Foros del Web. Hola a [email protected] Tengo el siguiente código html (simplificado): Código HTML: <html xmlns= "http://www.w3.org/1999/xhtml" > <head> <meta http-equiv="Content-Type" content= "text/html; charset=utf-8" /> <title> Titulo </title> ...
  #1 (permalink)  
Antiguo 04/05/2011, 06:14
 
Fecha de Ingreso: febrero-2010
Mensajes: 294
Antigüedad: 7 años, 10 meses
Puntos: 58
Ajustar el ancho de caja de texto

Hola a [email protected]

Tengo el siguiente código html (simplificado):

Código HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Titulo</title>
    <link rel="stylesheet" type="text/css"  href="estilos/estilo_form.css" />	
  </head>
  <body>
    <div id="principal">
   	  <form id="form" name="form" action="tratar.php" method="post">  	    
   	    <div id="intervalo">		  		      
		  <label>Hora ini:</label>
		  <select id="hora_ini" name="hora_ini">
		    <option value=""></option>
		    <option value="00">00</option>
		    <option value="06">06</option>
		    <option value="12">12</option>
		    <option value="18">18</option>
		    <option value="24">24</option>			   
		  </select>
		  <label>Hora fin:</label>
		  <select id="hora_fin" name="hora_fin">
		    <option value=""></option>
		    <option value="00">00</option>
		    <option value="06">06</option>
		    <option value="12">12</option>
		    <option value="18">18</option>
		    <option value="24">24</option>	
		  </select>
		  <label>Prob.:</label>
		  <select id="prob" name="prob">
		    <option value=""></option>
		    <option value="0">0</option>
		    <option value="50">50</option>
		    <option value="100">100</option>			   						
		  </select>
		  <label>Texto:</label>
		  <input class="text" id="com" value="" type="text" />	  
		  <div id="envio">
	            <button type="button" name="generar">Generar</button>
	          </div>
  	  </div>		
    </div>
  </body>
</html> 

Al div con id="intervalo" le he puesto un ancho de 720px y un estilo para que se vea el recuadro.
Estoy intentando conseguir que la caja de texto se extienda hasta el final del div, para lo cual he calculado que ancho debería tener y he puesto lo siguiente:

Código:
input{width:315px}
El ancho de los select los he dejado por defecto.
La cuestión es que en unos navegadores se ajusta hasta el final, pero en otros se queda corta. Incluso en el mismo navegador, dependiendo de la versión, se ajusta de una manera o de otra.
Como soy muy tiquismiquis para estas cosas, me gustaría saber si hay alguna forma de ajustar la caja de texto para que se extienda hasta el final del div en todos los navegadores.

Gracias. Un saludo.

Última edición por Nexus10; 04/05/2011 a las 06:33
  #2 (permalink)  
Antiguo 04/05/2011, 08:39
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: Ajustar el ancho de caja de texto

prueba con unidades relativas
  #3 (permalink)  
Antiguo 04/05/2011, 11:16
 
Fecha de Ingreso: febrero-2010
Mensajes: 294
Antigüedad: 7 años, 10 meses
Puntos: 58
Respuesta: Ajustar el ancho de caja de texto

Sí, ya suponía que sería con unidades relativas, pero he estado haciendo pruebas y no lo consigo.
Pensé que se podía conseguir metiendo el input en un div y luego darle al input un ancho de 100%, pero no sale lo que quiero. Hay algo que falla y no sé que es.

Etiquetas: ancho, caja
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:09.