javascript - 灵活/流畅的 HTML 表单的 CSS 秘诀是什么？

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”应用于选择元素这一事实来看，您似乎希望选择元素并排显示边。如果是这种情况，您可以通过执行以下操作来实现:

• 要居中对齐元素，您需要将“text-align:center”添加到包含的 block 级元素，在本例中为#selection。
• float 元素的位置不受“text-align”声明的影响，因此从选择元素中删除“float:left”声明。
• 为了让#make 和#model div 在不使用 float 的情况下并排放置，它们必须显示为内联元素，因此将“display:inline”添加到#make 和#model(注意这将失去这些元素的垂直边距，因此您可能需要进行一些其他更改以获得您想要的确切布局)。

由于默认情况下选择元素内联显示，最后一步的替代方法是删除#make 和#model div，并将“显示”和“隐藏”类直接应用于模型选择元素。