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