Question

简短说明：我删除了代码，这不是我的原始代码，但是使用此代码我可以重新创建问题，我想我将能够解决问题，最后我做了，解决方案有意义但它也让我迷惑，意味着我必须使用它。

Edit1-描述 - 当它们是两个字段标签并且输入在同一行时，但是当我删除div标签之一并且输入在不同的linee时，它不应该发生，因为div宽度是50％

请在HTML代码之前阅读qoute，您将能够理解这个问题，解释起来有点困难。

在html代码中，我只有三个div内部表单，只需删除一个div并运行代码，你就会理解为什么我对此感到困惑。

我能够通过给我的div类表单赋予宽度来解决问题，这很好，但我很困惑，为什么我必须这样做，谢谢

* {
  font-size: 20px;
}

.wrapper {
  width: 80%;
  background: grey;
  display: flex;
}

.form form {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
}

form div {
  width: 50%;
  box-sizing: border-box;
}

label {
  display: inline-block;
  min-width: 40%;
  text-align: right;
  box-sizing: border-box;
}

input {
  min-width: 45%;
  box-sizing: border-box;
}

<div class="wrapper">

  <div class="form">

    <form>

      <div>
        <label>Name</label>
        <input type="text">
      </div>

      <div>
        <label>Username</label>
        <input type="text">
      </div>

      <div>
        <label>password</label>
        <input type="password">
      </div>

    </form>
  </div>

</div>

Answer 1

即使你删除了一个div标签/输入，下面的CSS也会将所有div放在同一行。

对于form div，添加了display: inline-flex, padding: 2px;和input，添加了margin-left: 4px;。希望这是你想要的。

form div {
  width: 50%;
  box-sizing: border-box;
  display: inline-flex;
  padding: 2px;
}

input {
  min-width: 45%;
  box-sizing: border-box;
  margin-left: 4px;
}

这个输出让我很困惑

1 个答案: