Javascript 如何在<；表格></表格>；

我不是web开发人员，但我有一项与HTML/Javascript相关的任务。请把我当作初学者。问题是，出于某种原因，我需要将

放在

环境中。然而，它看起来比以前更混乱。我想知道怎样做和以前一样的款式

原始代码：

电邮：
提交

看起来是这样的：

新代码：

电邮：
提交

看起来像：

当我单击其他一些按钮时，它会变成这样：

---

我不知道它为什么会改变。

这是因为

显示：flex

现在只针对

表单

。 按如下方式更改代码：

<form style="display:flex;flex-direction:row">
    <label id="email_label" for="email" style="padding-right:5px">Email:</label>
    <input id="email" type="email" name="email" style="flex:1" placeholder="enter email" />
    <button id="ack" type="submit">Submit</button>
</form>

<form>
  <div style="display:flex;flex-direction:row">
    <label id="email_label" for="email" style="padding-right:5px">Email:</label>
    <input id="email" type="email" name="email" style="flex:1" placeholder="enter email" />
    <button id="ack" type="submit">Submit</button>
  </div>
</form>

电邮：
提交

现在它将再次以标签、输入和按钮元素为目标

正如雅罗曼达所说： 您也可以将div放入表单中，如下所示：

<form style="display:flex;flex-direction:row">
    <label id="email_label" for="email" style="padding-right:5px">Email:</label>
    <input id="email" type="email" name="email" style="flex:1" placeholder="enter email" />
    <button id="ack" type="submit">Submit</button>
</form>

<form>
  <div style="display:flex;flex-direction:row">
    <label id="email_label" for="email" style="padding-right:5px">Email:</label>
    <input id="email" type="email" name="email" style="flex:1" placeholder="enter email" />
    <button id="ack" type="submit">Submit</button>
  </div>
</form>

电邮：
提交

您的样式在元素树层次结构中更高一级，并且不会影响

标签

、

输入

和

按钮

元素，因为它们的父元素不再包含所需的样式。因此，将样式添加到父级。无论如何，您应该在表单设计的顶层添加

表单

标记

<form>
  <div style="display:flex;flex-direction:row">
     <label id="email_label" for="email" style="padding-right:5px">Email:</label>
     <input id="email" type="email" name="email" style="flex:1" placeholder="enter email" />
     <button id="ack" type="submit">Submit</button>
  </div>
</form>

电邮：
提交

如果你把div放在表格的标题中，比如他在表格中移动div的地方加上注释，会怎么样。在您的解决方案中，div完全没有解决任何问题！非常感谢。解决了的！非常感谢。