Ver Mensaje Individual
  #6 (permalink)  
Antiguo 20/03/2015, 09:37
Bugger
 
Fecha de Ingreso: septiembre-2010
Ubicación: /home/
Mensajes: 103
Antigüedad: 14 años, 2 meses
Puntos: 17
Respuesta: Problema con labels y salto de linea en un formulario hecho div + css

Hola, antes de nada agradecer las respuestas.
lo solucioné poniendo un div para cada label y input con un float left, marcando el % que ocupa cada uno según la cantidad de columnas que quería en cada fila.

css
Código CSS:
Ver original
  1. .form-data { width: 100%; }
  2. .form-data label{ display:block; }
  3. .form-data div.row { width: 100%;}
  4. .form-data div.column-25 {  float:left; width:25%;}
  5. .form-data div.column-50 {  float:left; width:50%;}
  6. .form-data label, .form-data input, .form-data select .form-data textarea{ display:block; }
  7. .form-data input.text, .form-data select   { margin-bottom:12px; width:95%; padding: .4em; }

Código HTML:
Ver original
  1. ...
  2. <div class="row">
  3.         <div class="column-25">
  4.             <label for="data_incidencia">Fecha</label>
  5.             <input type="text" id="data_incidencia" name="data_incidencia" value="" readonly="readonly" class="text ui-widget-content ui-corner-all" />
  6.         </div>
  7.         <div class="column-25">
  8.            <label for="mes">Mes</label>
  9.            <input type="text" id="mes" name="mes" value="" class="text ui-widget-content ui-corner-all"/>
  10.         </div>
  11.         <div class="column-25">
  12.             <label for="semana">Semana</label>
  13.             <input type="text" id="semana" name="semana" value="" class="text ui-widget-content ui-corner-all"/>
  14.         </div>
  15.         <div class="column-25">
  16.             <label for="semana_realitzacion">Semana realizaci&oacute;n</label>
  17.             <input type="text" id="semana_realitzacion" name="semana_realitzacion" value="" class="text ui-widget-content ui-corner-all"/>
  18.         </div>          
  19.     </div>
  20. <div style="clear: both"></div>
  21.     <div class="row">
  22.         <div class="column-50">
  23.             <label for="id_client">Cliente</label>
  24.             <select id="id_client" name="id_client" class="text ui-widget-content ui-corner-all">
  25.             <option>...</option>
  26.             </select>
  27.         </div>
  28.         <div class="column-25">
  29.             <label for="id_causa">Causas</label>
  30.             <select id="id_causa" name="id_causa" class="text ui-widget-content ui-corner-all">
  31. <option>...</option>          
  32.             </select>
  33.         </div>
  34.     </div>      
  35. </form>