我知道答案可能是不可思議的顯而易見，但即使在研究之后，我仍然不知道我應(yīng)該做什么。我希望輸入在一行中，但是標(biāo)簽在輸入之上。 我嘗試過讓輸入和標(biāo)簽顯示flex和flex-direction列，但是這只是把所有東西都變成了一個列。 以下是我努力實現(xiàn)的目標(biāo): 我正在解決的問題的一個例子。數(shù)字輸入位于標(biāo)簽下方。標(biāo)簽上寫著& quot日& quot，& quot月份& quot，& quot年份& quot

這是我的HTML:

<main>
    <section class="wrap">
      <section class="inputs">

      <label for="day">DAY</label>
      <input type="number" name="day" id="day" placeholder="DD">

      <label for="month">MONTH</label>
      <input type="number" name="month" id="month" placeholder="MM">

      <label for="year">YEAR</label>
      <input type="number" name="year" id="year" placeholder="YYYY">
    </section>

    <div id="line"></div>

      <p><span class="purple"> -- </span>years</p>
      <p><span class="purple"> -- </span>months</p>
      <p><span class="purple"> -- </span>days</p>
    </section>

  </main>

這是我的CSS:

label {
    font-family: 'Poppins', sans-serif;
    font-size: .6em;
    letter-spacing: 5px;
}

input {
    width: 130px;
    height: 60px;
    border-radius: 5px;
    border: var(--Smokey-grey) solid 1px;
    padding: 20px;
}

我為班級準(zhǔn)備了一些東西。輸入，但是我把它注釋掉了，因為它在我的標(biāo)記中引起了問題。如果有幫助的話，以下是我所知道的:

/* .inputs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
} */

但是，我刪除了它，因為。輸入包括標(biāo)簽，這導(dǎo)致標(biāo)簽與輸入在同一行。

這是我第一次接觸這個網(wǎng)站，所以請讓我知道我是否應(yīng)該添加更多的片段！ 如果有幫助的話，我目前正在使用Bootstrap框架。 謝謝你。

每個標(biāo)簽和輸入對都用類input-container包裝在一個附加元素中。的。inputs部分具有display: flex、flex-wrap: wrap和justify-content: center屬性，以便在寬度不夠時讓輸入容器換行。頁邊距:010像素。i nput-container類在輸入容器之間創(chuàng)建間距。標(biāo)簽將出現(xiàn)在每個輸入的正上方，所有輸入將位于同一行。

CSS:

label {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: .6em;
    letter-spacing: 5px;
    margin-bottom: 10px;
  }

  .inputs {
    display: block;
    flex-wrap: wrap;
    justify-content: center;
  }

  .input-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 10px;
  }

  input {
    display: block;
    width: 130px;
    height: 60px;
    border-radius: 5px;
    border: var(--Smokey-grey) solid 1px;
    padding: 20px;
    margin-top: 10px;
  }

HTML:

<main>
    <section class="wrap">
    <section class="inputs">
        <div class="input-container">
        <label for="day">DAY</label>
        <input type="number" name="day" id="day" placeholder="DD">
        </div>

        <div class="input-container">
        <label for="month">MONTH</label>
        <input type="number" name="month" id="month" placeholder="MM">
        </div>

        <div class="input-container">
        <label for="year">YEAR</label>
        <input type="number" name="year" id="year" placeholder="YYYY">
        </div>
    </section>

    <div id="line"></div>

    <p><span class="purple"> -- </span>years</p>
    <p><span class="purple"> -- </span>months</p>
    <p><span class="purple"> -- </span>days</p>
    </section>
</main>