以下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>

解决方案

回答

浮动选择框会将其显示属性更改为"阻止"。如果没有理由浮动它们，只需删除" float：left"声明，然后在" #makes"和" #models"中添加" text-align：center"即可。

回答

从问题中尚不能完全清楚我们要实现哪种布局，但是根据我们对选择元素应用" float：left"这一事实判断，我们似乎希望选择元素并排出现。在这种情况下，我们可以通过执行以下操作来实现：

• 要使元素居中对齐，我们需要向包含的块级元素中添加" text-align：center"，在本例中为#selection。
• 浮动元素的位置不受"文本对齐"声明的影响，因此请从选择元素中删除" float：left"声明。
• 为了使#make和#model div并排放置而不使用浮点数，它们必须显示为内联元素，因此应在#make和#model中都添加" display：inline"(请注意，这将失去这些元素的垂直边距，因此我们可能需要进行其他一些更改才能获得所需的确切布局)。

由于默认情况下以内联方式显示选择元素，因此最后一步的替代方法是删除#make和#model div并将" show"和" hide"类直接应用于模型选择元素。