Quali sono i segreti CSS per un modulo HTML flessibile/fluido?

Question

Il codice HTML/CSS/Javascript (jQuery) riportato di seguito visualizza il file #makes casella di selezione.Selezionando un'opzione viene visualizzato il #models selezionare la casella con le opzioni pertinenti.IL #makes la casella di selezione è decentrata e il file #models la casella di selezione riempie lo spazio vuoto quando viene visualizzata.

Come stilizzare il modulo in modo che il file #makes la casella di selezione è centrata quando è l'unico elemento del modulo visualizzato, ma quando vengono visualizzate entrambe le caselle di selezione, sono entrambe centrate all'interno del contenitore?

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

Dalla tua domanda non è del tutto chiaro quale layout stai cercando di ottenere, ma a giudicare dal fatto che hai applicato "float:left" agli elementi selezionati, sembra che tu voglia che gli elementi selezionati appaiano fianco a fianco.Se questo è il caso, puoi ottenere ciò procedendo come segue:

• Per allineare centralmente gli elementi è necessario aggiungere "text-align:center" all'elemento a livello di blocco contenente, in questo caso #selection.
• La posizione degli elementi mobili non è influenzata dalle dichiarazioni "text-align", quindi rimuovi la dichiarazione "float:left" dagli elementi selezionati.
• Affinché i div #make e #model possano stare fianco a fianco senza l'uso dei float, devono essere visualizzati come elementi in linea, quindi aggiungi "display:inline" sia a #make che a #model (nota che questo perderà il margine verticale su quegli elementi, quindi potrebbe essere necessario apportare altre modifiche per ottenere l'esatto layout desiderato).

Poiché gli elementi selezionati vengono visualizzati in linea per impostazione predefinita, un'alternativa all'ultimo passaggio è rimuovere i div #make e #model e applicare le classi "mostra" e "nascondi" direttamente all'elemento di selezione del modello.

Answer 2

Rendere mobili le caselle di selezione modifica le loro proprietà di visualizzazione in "blocco".Se non hai motivo di renderli float, rimuovi semplicemente il "float:left" e aggiungi "text-align:center" a #marche e #modelli.