Каковы секреты CSS для гибкой / плавной HTML-формы?

Приведенный ниже код 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>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
2 167
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Перемещение полей выбора изменяет их свойства отображения на «блокировать». Если у вас нет причин размещать их, просто удалите объявление «float: left» и добавьте «text-align: center» в #makes и #models.

Ответ принят как подходящий

Из вашего вопроса не совсем ясно, какой макет вы пытаетесь достичь, но судя по тому факту, что вы применили «float: left» к элементам выбора, похоже, вы хотите, чтобы элементы выбора отображались рядом. В этом случае вы можете добиться этого, выполнив следующие действия:

  • Чтобы выровнять элементы по центру, вам нужно добавить «text-align: center» к элементу уровня содержащего блока, в данном случае #selection.
  • Положение плавающих элементов не зависит от объявлений "text-align", поэтому удалите объявление "float: left" из выбранных элементов.
  • Чтобы блоки #make и #model располагались бок о бок без использования float, они должны отображаться как встроенные элементы, поэтому добавьте display: inline как в #make, так и в #model (обратите внимание, что это приведет к потере вертикальное поле для этих элементов, поэтому вам может потребоваться внести некоторые другие изменения, чтобы получить точный макет, который вы хотите).

Поскольку по умолчанию элементы выбора отображаются встроенными, альтернативой последнему шагу является удаление блоков #make и #model и прямое применение классов «показать» и «скрыть» к элементу выбора модели.

спасибо, что нашли время ответить. Хотя мой вопрос был расплывчатым, но вы попали в те области, которые мне нужны для решения проблемы.

Jay Corbett 15.09.2008 20:42

Другие вопросы по теме