Question

我正在尝试删除最后一个孩子的flex属性，我希望按钮位于表单字段下方。有什么想法吗？

.formbody {
  display: flex;
}

<div class="formbody">
  <input type="hidden" name="FORM_SUBMIT" value="">
  <input type="hidden" name="" value="">
  <div class="widget widget-text mandatory">
    <label for="ctrl_2" class="mandatory">Postleitzahl<span class="mandatory">*</span></label>
    <input type="number" name="plz" id="" class="text mandatory" value="" required="" step="any" min="1000" max="9999">
  </div>
  <div class="widget widget-text mandatory">
    <label for="" class="mandatory">E-Mail<span class="mandatory">*</span></label>
    <input type="email" name="email" id="" class="text mandatory" value="" required="">
  </div>
  <button type="submit" id="" class="submit" name="submit">Weiter</button>
</div>

Answer 1

来自this answer的类似请求并稍作改动，您可以使用break-before（或page-break-before）来实现所需的功能。您还必须在父元素上设置flex-wrap: wrap才能起作用。该答案中还提到了一些其他方法，您可以适应自己的需求。

.formbody {
  display: flex;
  flex-wrap: wrap;
}

.formbody :last-child {
  page-break-before: always; /* CSS 2.1 syntax */
  break-before: always; /* New syntax */
}

<div class="formbody">
  <input type="hidden" name="FORM_SUBMIT" value="">
  <input type="hidden" name="" value="">
  <div class="widget widget-text mandatory">
    <label for="ctrl_2" class="mandatory">Postleitzahl<span class="mandatory">*</span>
</label>
    <input type="number" name="plz" id="" class="text mandatory" value="" required="" step="any" min="1000" max="9999">
  </div>
  <div class="widget widget-text mandatory">
    <label for="" class="mandatory">E-Mail<span class="mandatory">*</span>
</label>
    <input type="email" name="email" id="" class="text mandatory" value="" required="">
  </div>
  <button type="submit" id="" class="submit" name="submit">Weiter</button>
</div>

Answer 2

将按钮放在div之外。

    <div class="formbody">
      <input type="hidden" name="FORM_SUBMIT" value="">
      <input type="hidden" name="" value="">
      <div class="widget widget-text mandatory">
        <label for="ctrl_2" class="mandatory">Postleitzahl<span class="mandatory">*</span></label>
        <input type="number" name="plz" id="" class="text mandatory" value="" required="" step="any" min="1000" max="9999">
      </div>
      <div class="widget widget-text mandatory">
        <label for="" class="mandatory">E-Mail<span class="mandatory">*</span></label>
        <input type="email" name="email" id="" class="text mandatory" value="" required="">
      </div>
    </div>
    <button type="submit" id="" class="submit" name="submit">Weiter</button>

如何删除最后一个孩子的flex属性？

2 个答案: