Alinear varios campos en filas y lineas

[sergi_climent]

Hola

tengo un formulario con distintos campos de selección, lo q necesitaría sería que quedaran X campos alineados en la primera fila, X campos alineados en la segunda fila, y X campos alineados en la tercera fila.

este seria el css

Código CSS:

#contenedor{
    width:800px;
    margin:auto;
    margin-top:20px;
    border:2px solid #C0C0C0;
    background-color:#F2F2F2;
    padding-bottom:20px;
}
 
li.inline {
  display: inline;
  padding-left: 3px;
  padding-right: 7px;
  border-right: 1px dotted #066;
  }
  
.select_seccio{ width:125px;}
 

y este mi quebradero de cabeza:

Código HTML:

<div id="contenedor">
    <form id="frmSqlMaquines" name="frmSqlMaquines" method="post" action="consulta.php" onsubmit="VeureMaquines(); return false">
        <ul>
        <li class="inline">Numero<input type="text" name="num_maq" id="num_maq" value="" size="6"/></li>
        <li class="inline">N.Serie<input type="text" name="nserie" id="nserie" value="" size="6" /></li>
        <li class="inline">Localidad
        <select id="id_localitat" name="id_localitat" onchange="javascript:VeureSeccions(this.value)">
            <?php
            while($localitats = mysql_fetch_array($sql_localitats)){
            ?>
                <option value="<?php echo $localitats['id_localitat'];?>" <?php if($localitats['id_localitat'] == $_SESSION['exp_user']['id_localitat']){echo "selected";}?>><?php echo $localitats['localitat'];?></option>
            <?php
            }
            ?>  
        </select>
        </li>
        <li class="inline">Seccion
                <div id="seccions"> 
                <select id="id_seccio" name="id_seccio" class="select_seccio">
                    <option value="0" selected="selected">Seccion...</option>
                    <?php
                    while($seccions = mysql_fetch_array($sql_seccions)){
                    ?>
                        <option value="<?php echo $seccions['id_seccio'];?>"><?php echo $seccions['seccio'];?></option>
                    <?php
                    }
                    ?>  
                </select>
            </div>      
        </li>   
        <li class="inline"><input type="submit" name="submit" id="button" value="Consultar" /></li>
        </ul>                   
    </form>
    <div id="formulario" style="display:none;"></div>
    <div id="tabla" class="tabla">    </div>
</div>
 

A tener en cuenta:
en mitad del código hay un div "seccions" este es necesario ya que se recarga mediante ajax según la localidad que escojan!

-->Resumiendo : Lo que vulgarmente seria:

Código HTML:

<table>
<tr>
<td>aqui un campo</td>
<td>aqui otro campo</td>
<td>aqui otro campo</td>
</tr>
<tr>
<td>aqui un campo</td>
<td>aqui otro campo</td>
<td>aqui otro campo</td>
</tr>
<tr>
<td>aqui un campo</td>
<td>aqui otro campo</td>
<td>aqui otro campo</td>
</tr>
</table> 

me gustaría saber hacerlo con maquetacion CSS

Gracias de antemano


Saludos

[sergi_climent]

rebuscando encontre eso... no me acuerdo de donde pero si a alguien le sirve pues ala aqui lo dejo:

Código css:

#tabla { 
    width: 800px;
    background-color: #ccc;
    margin-left: auto;
    margin-right: auto;
}
 
.fila { display: table-row;}
 
.celda {    
    display: table-cell;
    font-size: 0.8em;
    text-align: left;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
}
 

[cristian_cena]

Hola sergi_climent:

No entiendo una cosa, ¿Porque incluyes tus campos de formulario dentro de <ul><li> en vez de hacerlo dentro de una etiqueta <div>?

Si incluyes tus campos en divs podras trabjar con las propiedades css: position, float y clear (buscalo en "san google" XD) para "ordenar en filas y columnas" tu diseño.

Puedes pasar por http://www.araudi.net/migracion/migr...sin_dolor.html. El gran aporte de Mikmoro para todos aquellos que acostumbran a usar tablas para su maqueta y de pronto la quieren hacer con divs.

Saludos!

[sergi_climent]

Iniciado por cristian_cena

Hola sergi_climent:

No entiendo una cosa, ¿Porque incluyes tus campos de formulario dentro de <ul><li> en vez de hacerlo dentro de una etiqueta <div>?

Si incluyes tus campos en divs podras trabjar con las propiedades css: position, float y clear (buscalo en "san google" XD) para "ordenar en filas y columnas" tu diseño.

Puedes pasar por http://www.araudi.net/migracion/migr...sin_dolor.html. El gran aporte de Mikmoro para todos aquellos que acostumbran a usar tablas para su maqueta y de pronto la quieren hacer con divs.

Saludos!

Gracias por el aporte!

[cristian_cena]

De nada, espero te sea util, cualquier cosa estamos de este lado de la pantalla XD.