灵活/流畅的 HTML 表单的 CSS 秘诀是啥？

Posted 2023-05-08

【中文标题】灵活/流畅的 HTML 表单的 CSS 秘诀是啥？

【英文标题】：What are the CSS secrets to a flexible/fluid HTML form?灵活/流畅的 HTML 表单的 CSS 秘诀是什么？

【发布时间】：2010-09-08 19:47:02

【问题描述】：

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

【参考方案1】：

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

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

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

【讨论】：

感谢您花时间回答。尽管我的问题含糊不清，但您触及了我需要解决问题的领域。

【参考方案2】：

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