什么是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

它不完全清楚你的问题什么布局，你是想要实现，但通过判断，事实已经应用"浮动：留下"的选择元素，它看起来像你想的选择元素出现。如果是这种情况下，可以实现这一通过这样做如下：

• 集中调整的元素，你需要添加"文本的调整：中心"的含块级别的元素，在这种情况下#选择。
• 元件的位置，浮动不影响"文本保持一致"的声明，因此删除了"浮动：留下"宣言》，从中选择要素。
• 为了#让和模型div当与使用的浮动，他们必须显示作为内联要素，所以加上"显示：在线"既#让和模型(注意，这将失去垂直上的保证金，这些要素，因此可能需要做一些其他的更改得到确切的布局，你想要)。

作为选择要素是显示联默认情况下，一个替代的最后一步是去除#让和模型div和和申请"显示"和"隐藏"类型的选择元。

Answer 2

漂浮的选择框改变自己的显示性质，以"阻止"。如果你没有理由浮动他们，简单地删除"浮动：左边的"宣言》和添加"的文字调整:中心"，以让和模型。