css 尝试将输入数据排成一行，但输入数据上方有标签

x33g5p2x 于 2023-05-19 发布在其他

关注(0)|答案(1)|浏览(108)

我知道答案可能是非常明显的，但即使在研究之后，我仍然不知道我应该做什么。我想有一行的投入，但有标签的投入以上。我试过让输入和标签显示flex和flex-direction列，但是这只是把所有内容都变成了一列。这就是我想要达到的目标：An example of the problem I'm working on. The number inputs are below the labels. The labels say "DAY", "MONTH", "YEAR"
下面是我的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;
}

我为class .inputs准备了一些东西，但是我注解掉了它，因为它在我的标记中引起了问题。以下是我所做的，如果它有帮助：

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

但是，我删除了这个，因为.inputs包含了标签，这会导致标签与输入在同一行。
这是我第一次接触这个网站，所以请让我知道，如果我应该添加更多的片段！如果有帮助的话，我现在正在使用Bootstrap框架。谢谢你。

css

来源：https://stackoverflow.com/questions/76257249/trying-to-make-the-inputs-into-a-row-but-have-the-labels-above-the-inputs

1条答案

按热度按时间

lf3rwulv1#

每个标签和输入对都被 Package 在一个附加的元素中，并带有类input-container。.inputs部分显示：柔性，柔性 Package ：wrap和justify-content：如果宽度不够，居中属性使输入容器换行到下一行。保证金：.input-container类上的0 10 px创建输入容器之间的间距。标签将直接显示在每个输入的上方，并且所有输入将位于同一行上。
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>

赞(0）回复(0）举报 2023-05-19

我来回答

css 尝试将输入数据排成一行，但输入数据上方有标签

1条答案

相关问题

热门标签

最新问答