[SOLUCIONADO] Problema con labels y salto de linea en un formulario hecho div + css

[Bugger]

Hola
estoy intentando diseñar un formulario con contenedores, donde cada contenedor es una fila que puede contener (siento la redundancia) varios campos con sus etiquetas.
el caso es que me gustaría que los labels quedaran encima de los distintos inputs/select/textarea y no hay manera de conseguir lo.

queda algo asi:
<fila>label - input - label - input</fila>
y me gustaria algo asi:
<fila>
label label
input input
</fila>
el formulario que tengo es el siguiente:

Código HTML:

<form method="post" id="frm_show_form" class="form-data">
    <div class="row">
        <label for="num">N&deg;</label>        
        <input type="text" id="num" name="num" value="0" />             
    </div>
    <div class="row">
        <label for="fecha">Fecha</label>
        <input type="text" id="fecha" name="fecha" value="" readonly="readonly" />
        <label for="mes">Mes</label>
        <input type="text" id="mes" name="mes" value=""/>
        <label for="semana">Semana</label>
        <input type="text" id="setmana" name="setmana" value=""/>
        <label for="setmana">Semana realizaci&oacute;n</label>
        <input type="text" id="semana_realizacion" name="semana_realizacion" value=""/>
    </div>
....
</form>
 

con el siguiente css:

Código CSS:

.form-data label{ display:inline; }
.form-data div.row { width: 95%;}
.form-data .form-data input, .form-data select .form-data textarea{ display:block; }
.form-data input.text, .form-data select   { margin-bottom:12px; padding: .4em; } 
.form-data fieldset        { padding:0; border:0; margin-top:25px; }
 

[GemliosG]

Mira ver si esto te funciona

Código HTML:

 <form method="post" id="frm_show_form" class="form-data">
        <div class="row">
            <label for="num">N&deg;</label> </br>
            <input type="text" id="num" name="num" value="0" /> </br></br>     
        </div>
        <div class="row">
            <label for="fecha">Fecha</label></br>
            <input type="text" id="fecha" name="fecha" value="" readonly="readonly" /></br></br>
            <label for="mes">Mes</label></br>
            <input type="text" id="mes" name="mes" value=""/></br></br>
            <label for="semana">Semana</label></br>
            <input type="text" id="setmana" name="setmana" value=""/></br></br>
            <label for="setmana">Semana realizaci&oacute;n</label></br>
            <input type="text" id="semana_realizacion" name="semana_realizacion" value=""/></br></br>
        </div>
    ....
    </form> 

los </br> en html te permite realizar un salto de linea. O sea un br es colocar abajo, 2 br es dejar un espcio por el medio

Te sugiero, a mi me gusta así, pero es tu elección, poner fielset para que salga el formulario con los bordes característicos, el tamaño y esas cosas se puede ver en css

[Zeromm]

Si envuelves los label con sus input en un div y les pones un float o un flex o un inline-block posicionando esos divs uno al lado del otro ya lo tendrías

[GemliosG]

es <fieldset>

[AngelKrak]

me imagino que ya se soluciono con los saltos </br> >_< aun que me imagino que tambien se podian con Display: Block; ._.

con este css:

Código CSS:

input, label{
  display: block;
}
 

[Bugger]

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:

.form-data { width: 100%; }
.form-data label{ display:block; }
.form-data div.row { width: 100%;}
.form-data div.column-25 {  float:left; width:25%;}
.form-data div.column-50 {  float:left; width:50%;}
.form-data label, .form-data input, .form-data select .form-data textarea{ display:block; }
.form-data input.text, .form-data select   { margin-bottom:12px; width:95%; padding: .4em; }
 

Código HTML:

<form>
...
<div class="row">
        <div class="column-25">
            <label for="data_incidencia">Fecha</label>
            <input type="text" id="data_incidencia" name="data_incidencia" value="" readonly="readonly" class="text ui-widget-content ui-corner-all" />
        </div>
        <div class="column-25">
           <label for="mes">Mes</label>
           <input type="text" id="mes" name="mes" value="" class="text ui-widget-content ui-corner-all"/>
        </div>
        <div class="column-25">
            <label for="semana">Semana</label>
            <input type="text" id="semana" name="semana" value="" class="text ui-widget-content ui-corner-all"/>
        </div>
        <div class="column-25">
            <label for="semana_realitzacion">Semana realizaci&oacute;n</label>
            <input type="text" id="semana_realitzacion" name="semana_realitzacion" value="" class="text ui-widget-content ui-corner-all"/>
        </div>           
    </div>
<div style="clear: both"></div>
    <div class="row">
        <div class="column-50">
            <label for="id_client">Cliente</label>
            <select id="id_client" name="id_client" class="text ui-widget-content ui-corner-all">
            <option>...</option>
            </select>
        </div>
        <div class="column-25">
            <label for="id_causa">Causas</label>
            <select id="id_causa" name="id_causa" class="text ui-widget-content ui-corner-all">
<option>...</option>           
            </select>
        </div>
    </div>      
</form>
 

[AngelKrak]

bueno esa seria otra forma de hacerlo >_< Good Job >_<