Html 使用flexbox联系表单7输入字段包装

因此，我尝试使用WordPress Contact form 7插件创建一个这样的表单，我认为它应该可以工作并且是准确的，但显然不是：

相反，留给我的是：

以下是HTML：

<div class:input-flex>
      [text* your-name class:text-color class:mont-regular placeholder "Vārds, Uzvārds*"]
      [email* your-email class:text-color class:mont-regular placeholder "E-pasts*"]  
      [tel* phone-number class:full-width class:mont-regular class:text-color placeholder "Telefons*"]
      [textarea* question  class:full-width class:mont-regular class:text-color placeholder "Jautājums, vai komentārs*"]
</div>

提前谢谢

编辑：当我检查图元时显示：

<div class:input-flex>
      <span class="wpcf7-form-control-wrap your-name">
           <input type="text" name="your-name" value="Vārds, Uzvārds*" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required text-color mont-regular" aria-required="true" aria-invalid="false">
      </span>
      <br>
      <span class="wpcf7-form-control-wrap your-email">
           <input type="email" name="your-email" value="E-pasts*" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email text-color mont-regular" aria-required="true" aria-invalid="false">
      </span>
      <br>
      <span class="wpcf7-form-control-wrap phone-number">
          <input type="tel" name="phone-number" value="Telefons*" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-required wpcf7-validates-as-tel full-width mont-regular text-color" aria-required="true" aria-invalid="false">
      </span>
      <br>
      <span class="wpcf7-form-control-wrap question">
          <textarea name="question" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required full-width mont-regular text-color" aria-required="true" aria-invalid="false">Jautājums, vai komentārs*</textarea> 
      </span>
   </div>

Jautājums，vai komentārs*

这些

span

从何而来？

删除

并改用

您可以尝试以下方法：

<div class="form">
      <div class="input-flex">
        [text* your-name class:text-color class:mont-regular placeholder "Vārds, Uzvārds*"]
        [email* your-email class:text-color class:mont-regular placeholder "E-pasts*"]  
      </div>
     [tel* phone-number class:full-width class:mont-regular class:text-color placeholder "Telefons*"]
     [textarea* question  class:full-width class:mont-regular class:text-color placeholder "Jautājums, vai komentārs*"]

</div>

<style>
.input-flex{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 10%;
}
</style>

[text*您的姓名类别：text-color类别：mont常规占位符“Vārds，Uzvārds*”]
[电子邮件*您的电子邮件类别：文本颜色类别：mont常规占位符“E-pasts*”]
[tel*电话号码类别：全宽类别：mont常规类别：文本颜色占位符“Telefons*”]
[textarea*问题类：全幅类：蒙特常规类：文本颜色占位符“Jautājums，vai komentārs*”]
.输入弹性{
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
利润底部：10%；
}

显然，它并不完美，它将完全取决于您的使用。需要记住的重要一点是，您必须明确地包含要显示在单行上的元素，因为它们的“宽度”与其他元素不同

---

您还可以将其他元素包装在div中以控制它们。

将

input[type=“text”]

和

input[type=“email”]

的宽度设置为父容器的50%。您可以通过以下任一属性执行此操作：

width

、

flex

或

flex basis

---

另外，您可能还希望使用

gap

（在父容器上）而不是边距（在弹性项目上）来控制弹性项目之间的空间。

感谢所有的回复，我找到了答案

我所做的只是：

去掉了

和

标记，它们在我编译代码时随机生成并弄乱了我的代码。为此，请将其放入

functions.php

文件：

---

您是否检查了表单并确保

div.input-flex

和输入本身之间没有包装？我希望您可以发布生成的HTML。不是预编译的。为什么不使用，它可以实现所有这些，并且有一个UI编辑器来创建多列、多行网格布局表单。谢谢，很遗憾，我之前不知道这一点，它可以节省我很多时间-将在下一个项目中使用。不，不起作用。也没用嗨，欢迎来到stackoverflow。请花更多时间在答案中添加代码示例，以便更好地帮助其他有类似问题的人。

<div class="form">
      <div class="input-flex">
        [text* your-name class:text-color class:mont-regular placeholder "Vārds, Uzvārds*"]
        [email* your-email class:text-color class:mont-regular placeholder "E-pasts*"]  
      </div>
     [tel* phone-number class:full-width class:mont-regular class:text-color placeholder "Telefons*"]
     [textarea* question  class:full-width class:mont-regular class:text-color placeholder "Jautājums, vai komentārs*"]

</div>

<style>
.input-flex{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 10%;
}
</style>

remove_filter('the_content', 'wpautop');

add_filter('wpcf7_form_elements', function($content) {
  $content = preg_replace('/<(span).*?class="\s*(?:.*\s)?wpcf7-form-control-wrap(?:\s[^"]+)?\s*"[^\>]*>(.*)<\/\1>/i', '\2', $content);

  $content = str_replace('<br />', '', $content);
      
  return $content;
});

input[type="text"],
input[type="email"]{
  width: 40%;
}