Блог

Главная - Вопросы по программированию - Как сделать так, чтобы кнопка соответствовала высоте других элементов формы в начальной загрузке 5?

Как сделать так, чтобы кнопка соответствовала высоте других элементов формы в начальной загрузке 5?

#html #css #format #bootstrap-5

Вопрос:

Я пытаюсь сделать так, чтобы кнопка соответствовала той же высоте, что и другие элементы (либо сделайте ее меньше, чтобы соответствовать им, либо сделайте другие элементы больше и соответствуют кнопке). Вот код, который я использовал:

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r 8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

<form class="form-inline d-sm-flex pt-1 my-auto">
  <p class="align-middle text-light py-1">10 tokens. <br> something each. 10 max per txn</p>
  <div class="form-group mb-2 px-3">
    <select class="form-control form-control-lg py-2 px-5 form-control-dark text-center" style="background-color: black; color: white; border-color: rgba(255, 255, 255, 0.1);">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
      <option>10</option>
      <option>11</option>
      <option>12</option>
      <option>13</option>
      <option>14</option>
      <option>15</option>
      <option>16</option>
      <option>17</option>
      <option>18</option>
      <option>19</option>
      <option>20</option>
    </select>
  </div>
  <button class="btn btn-dark btn-lg" style="background-color: rgba(0, 0, 0, 0.7); border-width: 1.7px; border-color: white;"><span class="px-4" id="mintBtn">make it</span></button>
  <form>

Я действительно застрял, и помощь была бы очень признательна. Я также включаю фотографию того, как это выглядит в настоящее время на моем веб-сайте.

Пример

Ответ №1:

При создании встроенной формы вы можете добавить следующее правило CSS:

 form > * {
  height: 100%;
}

Таким образом, все дочерние элементы будут иметь одинаковую высоту. В приведенном ниже фрагменте вы можете увидеть результат. Я добавил черный фон в вашу форму для лучшего обзора.

 form {
  background-color: black;
}

form > * {
  height: 100%;
} 
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r 8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

<form class="form-inline d-sm-flex pt-1 my-auto">
  <p class="align-middle text-light py-1">10 tokens. <br> something each. 10 max per txn</p>
  <div class="form-group mb-2 px-3">
    <select class="form-control form-control-lg py-2 px-5 form-control-dark text-center" style="background-color: black; color: white; border-color: rgba(255, 255, 255, 0.1);">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
      <option>10</option>
      <option>11</option>
      <option>12</option>
      <option>13</option>
      <option>14</option>
      <option>15</option>
      <option>16</option>
      <option>17</option>
      <option>18</option>
      <option>19</option>
      <option>20</option>
    </select>
  </div>
  <button class="btn btn-dark btn-lg" style="background-color: rgba(0, 0, 0, 0.7); border-width: 1.7px; border-color: white;"><span class="px-4" id="mintBtn">make it</span></button>
  <form>
Метки: ,