为什么这个带输入的 flexbox 不工作？

Question

PHP里面是HTML。输入框就在彼此下面。我想将它们放置在矩形内的水平 flexbox 中，并排填充矩形。

#retang1{
  display: flex;
  position: absolute;
  width: 1118px;
  height: 95px;
  left: 117px;
  top: 290px;

  background: linear-gradient(90deg, #5FC5B7 0%, #3A857B 100%);
  box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.25);
  border-radius: 17px;
} 
    
#retang1 > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

<div id="retang1">
  <form action="enviarinfos.php" method="POST">
    <div>
      <input type="text" name="materia" value="Matéria">
      <br>
    </div>
    <div>
      <input type="text" name="trab" value="Trabalho">
      <br>
    </div>
    <div>
      <input type="text" name="prova" value="Prova">
      <br>
    </div>
    <div>
      <button type="submit" name="submit">Enviar</button>
    </div>
  </form>
</div>

Answer 1

将此添加到您的样式中：

form {
    display: flex;
}

并相应地设计风格。您也可以阅读此 link。 https://www.w3schools.com/css/css3_flexbox.asp

Answer 2

display:flex 不适用于所有子元素，它只为直接子元素设置一个弹性容器。这就是为什么您必须将它放在 form 元素中。

Answer 3

正如@Nayereh 和@jakub 所说，您应该将 flex 设置为 form 元素。它有效。所以他们的答案是正确的：

#retang1{
  position: absolute;
  width: 1118px;
  height: 95px;
  left: 117px;
  top: 290px;
  background: linear-gradient(90deg, #5FC5B7 0%, #3A857B 100%);
  box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.25);
  border-radius: 17px;
} 
form{
  display: flex;
}
#retang1 > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

<div id="retang1">
  <form action="enviarinfos.php" method="POST">
    <div>
      <input type="text" name="materia" value="Matéria">
      <br>
    </div>
    <div>
      <input type="text" name="trab" value="Trabalho">
      <br>
    </div>
    <div>
      <input type="text" name="prova" value="Prova">
      <br>
    </div>
    <div>
      <button type="submit" name="submit">Enviar</button>
    </div>
  </form>
</div>

为什么这个带输入的 flexbox 不工作？

Why isn't this flexbox with inputs working?

html

css

frontend

flexbox