Каковы секреты CSS для гибкой / гибкой формы HTML?

Question

В приведенном ниже коде HTML / CSS / Javascript (jQuery) отображается поле выбора #makes. При выборе параметра отображается поле выбора #models с соответствующими параметрами. Поле выбора #makes располагается не по центру, а поле выбора #models заполняет пустое пространство при его отображении.

Как оформить форму так, чтобы поле выбора #makes центрировалось, когда отображается только один элемент формы, но когда отображаются оба поля выбора, они оба центрированы внутри контейнера?

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

Из вашего вопроса не совсем понятно, какого макета вы пытаетесь достичь, но, судя по тому факту, что вы применили «float: left» к элементам select, похоже, что вы хотите, чтобы элементы select появлялись рядом друг с другом. боковая сторона. Если это так, вы можете добиться этого, выполнив следующие действия:

• Для централизованного выравнивания элементов необходимо добавить «text-align: center» к содержащемуся элементу уровня блока, в данном случае # selection.
• Положение плавающих элементов не зависит от объявлений text-align, поэтому удалите объявление float: left из элементов select.
• Для того, чтобы div #make и #model располагались рядом друг с другом без использования плавающих элементов, они должны отображаться как встроенные элементы, поэтому добавьте «display: inline» в #make и #model (обратите внимание, потеряет вертикальное поле для этих элементов, поэтому вам может потребоваться внести некоторые другие изменения, чтобы получить точный макет, который вы хотите).

Поскольку элементы выбора по умолчанию отображаются встроенными, альтернативой последнему шагу является удаление элементов div #make и #model и применение классов «show» и «hide» непосредственно к элементу выбора модели.

Answer 2

Плавающие поля выбора изменяют свои свойства отображения на «блок». Если у вас нет причин для их размещения, просто удалите объявление «float: left» и добавьте «text-align: center» в #makes и # models.