Как добиться двух входов рядом друг с другом?

Question

каждый раз, когда мне приходится работать с входами , эта проблема возникает.

Моя цель - создать простую форму ввода и добиться того, чтобы номер типа 2 входов был одинаковой ширины, с небольшим промежутком между ними в одной строке, прямо под вводом «Описание».

Я пытался добавить их в div и применить к ним Display: inline-block, но это не сработало. Теперь я попытался применить к нему display: flex, и вот результат. Изменить ширину ввода не получается. Спасибо за вашу помощь.

.inputBox{
  width: 30%;
  padding: 2em;
  text-align: center;
  background-color: white;
  border-radius: .3em;
}

.inputBox h3{
  font-size: 2em;
  font-weight: 300;
}

.inputBox input[type="text"]{
  width: 100%;
  padding: .5em;
  margin: 1em 0;
  border-radius: .3em;
  border: 1px solid grey;
  box-sizing: border-box;
}

.inputBox input[type="number"]{
  padding: .5em;
  border-radius: .3em;
  border: 1px solid grey;
  box-sizing: border-box;
  width: 100%;
}

label{
  display: block;
  text-align: left;
}

.flex{
  display: flex;
  justify-content: space-between;
}

<div className="inputBox">
  <h3>Please set your alarm</h3>

  <label for="text">Description</label>
  <input type="text" id="text" />

  <div className="flex">
    <div className="inputNumber">
      <label>Hours</label>
      <input type="number" />
    </div>
                            
  <div className="inputNumber">
    <label>Minutes</label>
    <input type="number" />
  </div>
</div>

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

Answer 1

Если вы хотите сохранить ширину inputBox на уровне 30%, вы можете сделать что-то вроде этого: HTML

<div class="inputBox">
        <h3>Please set your alarm</h3>

        <label for="text">Description</label>
        <input type="text" id="text" />

        <div class="flex">
            <div class="inputNumber">
                <label>Hours</label>
                <input type="number" />
            </div>

            <div class="inputNumber second">
                <label>Minutes</label>
                <input type="number" />
            </div>
        </div>
    </div>

CSS

.inputBox {
        width: 30%;
        padding: 2em;
        text-align: center;
        background-color: white;
        border-radius: .3em;
    }

    .inputBox h3 {
        font-size: 2em;
        font-weight: 300;
    }

    .inputBox input[type="text"] {
        width: 100%;
        padding: .5em;
        margin: 1em 0;
        border-radius: .3em;
        border: 1px solid grey;
        box-sizing: border-box;
    }

    .inputBox input[type="number"] {
        padding: .5em;
        border-radius: .3em;
        border: 1px solid grey;
        box-sizing: border-box;
        width: 100%;
    }

    label {
        display: block;
        text-align: left;
    }

    .flex {
        display: flex;
        flex-direction: row;

    }

    .inputNumber {
        width: 50%;
    }

    .second {
        margin-left: 5%;
    }

Результат

Answer 2

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>    .inputBox{
      width: 30%;
      padding: 2em;
      text-align: center;
      background-color: white;
      border-radius: .3em;
    }

    .inputBox h3{
      font-size: 2em;
      font-weight: 300;
    }

    .inputBox input[type="text"]{
      width: 100%;
      padding: .5em;
      margin: 1em 0;
      border-radius: .3em;
      border: 1px solid grey;
      box-sizing: border-box;
    }

    .inputBox input[type="number"]{
      padding: .5em;
      border-radius: .3em;
      border: 1px solid grey;
      box-sizing: border-box;
      width: 100%;
    }

    label{
      display: block;
      text-align: left;
    }

    .flex{
      display: flex;
      justify-content: space-between;
    }
.inputNumber{
  flex-basis:48%;
} 

    <div class="inputBox">
      <h3>Please set your alarm</h3>

      <label for="text">Description</label>
      <input type="text" id="text" />

      <div class="flex">
        <div class="inputNumber">
          <label>Hours</label>
          <input type="number" />
        </div>
                                
      <div class="inputNumber">
        <label>Minutes</label>
        <input type="number" />
      </div>
    </div>

Answer 3

вы можете использовать display: grid для своего родителя и изменить первый дочерний элемент сетки, чтобы он занимал первую строку, например:

.parentContainer { 
   /* this will create the grid for us with 1rem gap between children */
   display: grid;
   grid-template-columns: repeat(1, 1fr),
   grid-gap: 1rem;
}


.theChildElementYouWantToFullWidth {
   grid-column: 1 / span 3;
}

для получения дополнительной информации проверьте this do c из MDN по сетке!

Answer 4

две проблемы:

1. вы используете className, когда вы должны использовать class
2. измените ширину .inputBox на 100%

также, вы ВСЕГДА следует попытаться опубликовать рабочий фрагмент, который показывает вашу проблему. Вы получите ответы быстрее, и те, которые с большей вероятностью будут работать!

.inputBox{
  width: 100%;
  padding: 2em;
  text-align: center;
  background-color: white;
  border-radius: .3em;
}

.inputBox h3{
  font-size: 2em;
  font-weight: 300;
}

.inputBox input[type="text"]{
  width: 100%;
  padding: .5em;
  margin: 1em 0;
  border-radius: .3em;
  border: 1px solid grey;
  box-sizing: border-box;
}

.inputBox input[type="number"]{
  padding: .5em;
  border-radius: .3em;
  border: 1px solid grey;
  box-sizing: border-box;
  width: 100%;
}

label{
  display: block;
  text-align: left;
}

.flex{
  display: flex;
  justify-content: space-between;
}

<div class="inputBox">
  <h3>Please set your alarm</h3>

  <label for="text">Description</label>
  <input type="text" id="text" />

  <div class="flex">
    <div class="inputNumber">
      <label>Hours</label>
      <input type="number" />
    </div>
                            
  <div class="inputNumber">
    <label>Minutes</label>
    <input type="number" />
  </div>
</div>