Блог

Главная - Вопросы по программированию - Обратитесь за помощью, чтобы сделать форму HTML/CSS гибкой

Обратитесь за помощью, чтобы сделать форму HTML/CSS гибкой

#html #css #flexbox

Вопрос:

Я пытаюсь создать форму бронирования кинотеатра. Я создал форму и вложил каждую форму в div.

Я хотел бы, чтобы форма растянулась и заполнила пространство под навигационной панелью, но мой flexbox, похоже, не работает.

Можно ли использовать flexbox для формы? Я хотел бы, чтобы форма выглядела так, как показано на рисунке ниже. В качестве альтернативы вы можете обратиться к образцу веб-сайта.

введите описание изображения здесь

 html {
  background-color: white;
}

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  max-width: 1020px;
  margin: auto;
}

/* nav bar design */
nav {
  width: 100%;
  background-color: rgb(230, 23, 57);
  margin: auto;
  display: flex;
  justify-content: space-evenly;
}

nav ul li {
  display: inline-block;
  list-style: none;
  position: relative;
}

nav ul li a {
  display: flex;
  font-family: Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  padding: 7px 20px;
  text-decoration: none;
  color: white;
}

nav ul li a:hover {
  color: black;
}

nav ul li ul {
  display: none;
  position: absolute;
  background-color: rgb(230, 23, 57);
  padding: 10px;
  border-radius: 0px 0px 4px 4px;
}

nav ul li:hover ul {
  display: block;
}

nav ul li ul li {
  width: 145px;
  border-radius: 4px;
}

nav ul li ul li a {
  padding: 5px;
}

nav ul li ul li a:hover {
  color: black;
}

/* form design */
.flex-container {
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
} 
 <header>
  <!-- Header -->
  <h1>Welcome to Carnival Cinema!</h1>

  <!-- Navigation Bar -->
  <nav>
    <ul>
      <li><a href="#">Movies</a>
        <ul>
          <li><a href="#">Now Showing</a></li>
          <li><a href="#">Coming Soon</a></li>
        </ul>
      </li>
      <li><a href="#">Promotions</a></li>
      <li><a href="#">Corporations</a>
        <ul>
          <li><a href="#">Events</a></li>
          <li><a href="#">Advertisement</a></li>
          <li><a href="#">Vouchers</a></li>
        </ul>
      </li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>

  <!-- Form to book movie -->

  <div class="flex-container">
    <form action="" method="post">

      <div class="container1">
        <select id="movie">
          <option value="">Select Movie</option>
          <option value="m1">Three Idiots</option>
          <option value="m2">Dangal</option>
          <option value="m3">PK</option>
        </select>
      </div>

      <div class="container2">
        <select id="cinema">
          <option value="">Select Cinema</option>
          <option value="c1">Carnival Cinema Golden Mile Center</option>
          <option value="c2">Carnival S11 Dormitory</option>
        </select>
      </div>

      <div class="container3">
        <select id="date">
          <option value="">Select Date</option>
          <option value="d1">07-07-2021</option>
          <option value="d1">08-07-2021</option>
          <option value="d1">09-07-2021</option>
        </select>
      </div>

      <div class="container4">
        <select id="time">
          <option value="">Select Time</option>
          <option value="d1">18:00</option>
          <option value="d1">20:00</option>
        </select>
      </div>

      <div>
        <input type="submit" value="Book Now">
      </div>

    </form>
  </div>

</header>

Ответ №1:

Добавьте display: flex; к самому form элементу:

(в вашем коде элемент формы является единственным дочерним элементом контейнера flex, поэтому параметр flex на самом деле не оказывает никакого влияния, поскольку он влияет только на прямых дочерних элементов)

 html {
  background-color: white;
}

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  max-width: 1020px;
  margin: auto;
}


/* nav bar design */

nav {
  width: 100%;
  background-color: rgb(230, 23, 57);
  margin: auto;
  display: flex;
  justify-content: space-evenly;
}

nav ul li {
  display: inline-block;
  list-style: none;
  position: relative;
}

nav ul li a {
  display: flex;
  font-family: Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  padding: 7px 20px;
  text-decoration: none;
  color: white;
}

nav ul li a:hover {
  color: black;
}

nav ul li ul {
  display: none;
  position: absolute;
  background-color: rgb(230, 23, 57);
  padding: 10px;
  border-radius: 0px 0px 4px 4px;
}

nav ul li:hover ul {
  display: block;
}

nav ul li ul li {
  width: 145px;
  border-radius: 4px;
}

nav ul li ul li a {
  padding: 5px;
}

nav ul li ul li a:hover {
  color: black;
}


/* form design */

.flex-container {
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

form {
  display: flex;
} 
 <header>
  <!-- Header -->
  <h1>Welcome to Carnival Cinema!</h1>

  <!-- Navigation Bar -->
  <nav>
    <ul>
      <li><a href="#">Movies</a>
        <ul>
          <li><a href="#">Now Showing</a></li>
          <li><a href="#">Coming Soon</a></li>
        </ul>
      </li>
      <li><a href="#">Promotions</a></li>
      <li><a href="#">Corporations</a>
        <ul>
          <li><a href="#">Events</a></li>
          <li><a href="#">Advertisement</a></li>
          <li><a href="#">Vouchers</a></li>
        </ul>
      </li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>

  <!-- Form to book movie -->

  <div class="flex-container">
    <form action="" method="post">

      <div class="container1">
        <select id="movie">
          <option value="">Select Movie</option>
          <option value="m1">Three Idiots</option>
          <option value="m2">Dangal</option>
          <option value="m3">PK</option>
        </select>
      </div>

      <div class="container2">
        <select id="cinema">
          <option value="">Select Cinema</option>
          <option value="c1">Carnival Cinema Golden Mile Center</option>
          <option value="c2">Carnival S11 Dormitory</option>
        </select>
      </div>

      <div class="container3">
        <select id="date">
          <option value="">Select Date</option>
          <option value="d1">07-07-2021</option>
          <option value="d1">08-07-2021</option>
          <option value="d1">09-07-2021</option>
        </select>
      </div>

      <div class="container4">
        <select id="time">
          <option value="">Select Time</option>
          <option value="d1">18:00</option>
          <option value="d1">20:00</option>
        </select>
      </div>

      <div>
        <input type="submit" value="Book Now">
      </div>

    </form>
  </div>

</header>
Метки: ,