0

下面的 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>

4

2 回答 2

1

您的问题并不完全清楚您要实现什么布局，但从您已将“float：left”应用于选择元素的事实来看，您似乎希望选择元素并排出现。如果是这种情况，您可以通过执行以下操作来实现：

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

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

于 2008-09-14T00:46:57.990 回答
0

浮动选择框将其显示属性更改为“块”。如果您没有理由浮动它们，只需删除“float：left”声明，并将“text-align：center”添加到#makes 和#models。

于 2008-09-14T00:13:19.773 回答