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" 宣言の影響を受けないため、select 要素から "float:left" 宣言を削除します。
  • #make と #model div を float を使用せずに並べて配置するには、それらをインライン要素として表示する必要があるため、#make と #model の両方に「display:inline」を追加します (これにより、必要な正確なレイアウトを得るには、他の変更を加える必要があるかもしれません)。

select 要素はデフォルトでインラインで表示されるため、最後の手順の代わりに #make および #model div を削除し、"show" および "hide" クラスをモデルの select 要素に直接適用します。

于 2008-09-14T00:46:57.990 に答える
0

選択ボックスをフローティングすると、表示プロパティが「ブロック」に変わります。フロートする理由がない場合は、"float: left" 宣言を削除し、"text-align: center" を #makes と #models に追加します。

于 2008-09-14T00:13:19.773 に答える