¿Cuáles son los CSS secretos para una flexible/de líquido formulario HTML?

Question

El siguiente HTML/CSS/Javascript (jQuery) código de la muestra #makes cuadro de selección.La selección de una opción, se muestra la #models cuadro de selección con las opciones pertinentes.El #makes seleccione la casilla que se encuentra al lado del centro y la #models seleccione la casilla llena el espacio vacío cuando se muestra.

Cómo hacer que el estilo de la forma para que el #makes cuadro de selección se centra en que es la única forma de elemento se muestra, pero cuando ambos cuadros de selección se muestran, están centrados en el contenedor?

var cars = [
  {
    "makes"  : "Honda",
    "models"  : ['Accord','CRV','Pilot']
  }, 
  {
    "makes"   :"Toyota",
    "models"  : ['Prius','Camry','Corolla']
  }
];

$(function() {
  vehicles = [] ;
  for(var i = 0; i < cars.length; i++) {
    vehicles[cars[i].makes] = cars[i].models ;
  }
  var options = '';
  for (var i = 0; i < cars.length; i++) {
    options += '<option value="' + cars[i].makes + '">' + cars[i].makes + '</option>';
  }
  $("#make").html(options);   // populate select box with array

  $("#make").bind("click", function() {
    $("#model").children().remove() ;   // clear select box
    var options = '';
    for (var i = 0; i < vehicles[this.value].length; i++) {
      options += '<option value="' + vehicles[this.value][i] + '">' +
        vehicles[this.value][i] +
        '</option>';
    }
    $("#model").html(options);   // populate select box with array
    $("#models").addClass("show");
  });     // bind end
});

.hide {
  display: none;
}
.show {
  display: inline;
}
fieldset {
  border: #206ba4 1px solid;
}
fieldset legend {
  margin-top: -.4em;
  font-size: 20px;
  font-weight: bold;
  color: #206ba4;
}
fieldset fieldset {
  position: relative;
  margin-top: 25px;
  padding-top: .75em;
  background-color: #ebf4fa;
}
body {
  margin: 0;
  padding: 0;
  font-family: Verdana;
  font-size: 12px;
  text-align: center;
}
#wrapper {
  margin: 40px auto 0;
}
#myFieldset {
  width: 213px;
}
#area {
  margin: 20px;
}
#area select {
  width: 75px;
  float: left;
}
#area label {
  display: block;
  font-size: 1.1em;
  font-weight: bold;
  color: #000;
}
#area #selection {
  display: block;
}
#makes {
  margin: 5px;
}
#models {
  margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<div id="wrapper">
  <fieldset id="myFieldset">
    <legend>Cars</legend>
    <fieldset id="area">
      <label>Select Make:</label>
      <div id="selection">
        <div id="makes">
          <select id="make"size="2"></select>
        </div>
        <div class="hide" id="models">
          <select id="model" size="3"></select>
        </div>
      </div>
    </fieldset>
  </fieldset>
</div>

Answer 1

No es totalmente claro en su pregunta ¿qué diseño que estamos tratando de lograr, pero a juzgar por el hecho de que se han aplicado "float:left" para la selección de elementos, parece que quieren que la selección de elementos que aparecen al lado.Si este es el caso, usted puede lograr esto haciendo lo siguiente:

• De forma centralizada alinear los elementos que usted necesita para agregar "text-align:center" para el bloque que contiene a nivel de elemento, en este caso #selección.
• La posición de los elementos que son flotantes no es afectada por la "text-align" declaraciones, por lo que eliminar el "float:left" declaración de la selección de elementos.
• En orden para el #hacer #y modelo de divs para que se sientan de lado a lado con el uso de flotadores deben mostrarse como los elementos en línea, por lo que añadir "display:inline" para #hacer y #model (tenga en cuenta que este perderá el margen vertical sobre los elementos, así que usted puede ser que necesite hacer algunos cambios para obtener el diseño exacto que usted desea).

Como seleccionar los elementos se muestran en línea de forma predeterminada, una alternativa para el último paso es quitar el #hacer #y modelo de divs y aplicar el "espectáculo" y "ocultar" las clases para el modelo seleccione el elemento directamente.

Answer 2

Flotante de los cuadros de selección de los cambios de sus propiedades de pantalla para "bloquear".Si usted no tiene ninguna razón para flotar, simplemente quitar el "float:a la izquierda" de la declaración, y añadir "text-align:centro" a #hace #y modelos.