Foros del Web » Creando para Internet » CSS »

alinear input:text con listas

Estas en el tema de alinear input:text con listas en el foro de CSS en Foros del Web. hola!! Vereis ahora tengo echa una lista no ordenada y con input:text en cada elemento de la lista para introducir datos, lo que pasa es ...
  #1 (permalink)  
Antiguo 19/10/2007, 10:45
Avatar de cris_maco  
Fecha de Ingreso: abril-2007
Ubicación: Salamanca
Mensajes: 254
Antigüedad: 10 años, 7 meses
Puntos: 0
alinear input:text con listas

hola!!

Vereis ahora tengo echa una lista no ordenada y con input:text en cada elemento de la lista para introducir datos, lo que pasa es que quiero alinear esos input para que esten todos a la misma medida y tal y ahora lo unico que se me ocurrio fue meter espacios en blanco. Ya probe a encerrar el input:text entre un div con align=center pero lo que hace es que se coloque una linea por abajo. Queria saber si hay alguna otra solucion menos rudimentaria que la mia... y tambien preguntar como puedo cambiar el espaciado que hay entre cada elemento de la lista ya que con los inputs me quedan muy pegados.

Les pongo el codigo que tengo:
Código PHP:
<blockquote><blockquote><blockquote><blockquote><blockquote><blockquote>
  <
ul>
    <
li><img src="../fotos/flecha.gif" height="15" /><span onmouseover="doTooltip(event,mensaje2)" onmouseout="hideTip()">Expediente:</span>&nbsp;&nbsp;&nbsp;<html:text property="numExp" style="font-weight: bold;" size="20" /><br><html:errors property="numExpJ" /></li>
    <
li><img src="../fotos/flecha.gif" height="15" /><span onMouseOver="doTooltip(event,fechas)" onMouseOut="hideTip()">Fecha:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<html:text property="fecha" style="font-weight:bold;" size="20"/><html:errors property="fechaJ" /></li>
    <
li><img src="../fotos/flecha.gif" height="15" /><span onMouseOver="doTooltip(event,horas)" onMouseOut="hideTip()">Hora:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<html:text property="hora" style="font-weight:bold;" size="20"/><html:errors property="horaJ" /></li>
    <
li><img src="../fotos/flecha.gif" height="15" /><span onMouseOver="doTooltip(event,mensaje1)" onMouseOut="hideTip()">Tipo:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<html:text property="tipo" style="font-weight:bold;" size="20"/><html:errors property="tipoJ" /></li>
    <
li><img src="../fotos/flecha.gif" height="15" /><span onMouseOver="doTooltip(event,mensaje1)" onMouseOut="hideTip()">Sala:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<html:text property="sala" style="font-weight:bold;" size="20"/><html:errors property="salaJ" /></li>
  <
li><input type="radio" id="juicio" name="evento" value="juicio"/>Juicio  <input type="radio" id="plazos" name="evento" value="plazos"/>Plazos</li>
      <
li><img src="../fotos/flecha.gif" height="15" /><span onMouseOver="doTooltip(event,mensaje1)" onMouseOut="hideTip()">Descripcion (200 caracteres max.)</span></li>
      <
li><textarea  name="juicio" cols="31" rows="4"></textarea><html:errors property="juicio" /></li>
</
ul>

</
blockquote></blockquote></blockquote></blockquote></blockquote></blockquote
le tengo puesto una sangria para alinearlo en el centro y que quedara bien colocado porque probe usando unca capa pero se me descolocaba .
perdon que tengo html:text(es que uso struts), pero es lo mismo que con input salvo algunos parametros

aqui pueden ver una captura:
http://www.megaupload.com/?d=7GJDVZD6
gracias

Última edición por cris_maco; 19/10/2007 a las 10:51 Razón: incluir imagen
  #2 (permalink)  
Antiguo 24/10/2007, 05:08
Avatar de cris_maco  
Fecha de Ingreso: abril-2007
Ubicación: Salamanca
Mensajes: 254
Antigüedad: 10 años, 7 meses
Puntos: 0
Re: alinear input:text con listas

Me contesto a mi misma por si alguien lo necesita:

www.librosweb.es, ahi lo encontre.
div {
margin: .5em 0;
}
div label {
width: 15%;
float: left;
}

con estas propiedades y envolviendo cada li con:
<li><div><label for="nombre">Nombre</label><input type="text" /></div>

yo luego lo que tambien hice para centrarlo en mi pagina fue envolverlo en otra capa y situar esa capa
va perfecto
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 12:18.