将输入类型设置为数字会使输入宽度更短

Question

我正在通过Contact Form 7使用wordpress插件进行表单。几乎没有样式，只是简单的显示：flex;设置所以我可以在一行中有两个输入，每个父容器的总容量为100％。但是，当我将一个输入类型更改为数字而不是文本时，该输入会缩小并变得更短，并且我有这种奇怪的间距。我尝试了很多东西，改变显示，宽度，填充，什么都有，但没有任何帮助。使数字输入更大的唯一因素是为输入[type = number]设置固定宽度，但这不是我需要的，我需要flex显示来完成所有工作，并使每个字段占所有屏幕尺寸的50％。 / p>

我错过了什么吗？为什么数字字段的行为如此奇怪？

这是数字输入类型设置的外观：

div.wpcf7 {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.wpcf7-form input {
  display: flex;
  flex: 0 0 100%;
  border: none;
  border-radius: 0;
  background: #eeeeee;
}

<section id="text-6" class="widget widget_text">            <div class="textwidget"><div role="form" class="wpcf7" id="wpcf7-f231-o1" lang="en-US" dir="ltr">
<div class="screen-reader-response"></div>
<form action="/wordpress/#wpcf7-f231-o1" method="post" class="wpcf7-form" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="231"><br>
<input type="hidden" name="_wpcf7_version" value="4.9.2"><br>
<input type="hidden" name="_wpcf7_locale" value="en_US"><br>
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f231-o1"><br>
<input type="hidden" name="_wpcf7_container_post" value="0">
</div>
<div class="first-group">
<label><br>
    <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text form-control" aria-invalid="false" placeholder="Your name here"></span> </label><p></p>
<p><label><br>
    <span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email form-control" aria-required="true" aria-invalid="false" placeholder="Organisation"></span> </label>
</p></div>
<p><label> Area of interest<br>
   <span class="wpcf7-form-control-wrap your-country"><select name="your-country" class="wpcf7-form-control wpcf7-select form-control" aria-invalid="false"><option value="Equipment">Equipment</option><option value="Sell">Sell</option><option value="Buy">Buy</option></select></span></label></p>
<div class="second-group">
<label> Contact me by:<br>
    <span class="wpcf7-form-control-wrap your-message"><input type="number" name="your-message" value="" class="wpcf7-form-control wpcf7-number wpcf7-validates-as-number form-control" aria-invalid="false" placeholder="Phone:"></span> </label><br>
<label><br>
    <span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email form-control" aria-required="true" aria-invalid="false" placeholder="Email:"></span> </label>
</div>
<div class="contact_cta"><input type="submit" value="Submit" class="wpcf7-form-control wpcf7-submit btn btn-primary"><span class="ajax-loader"></span></div>
<div class="wpcf7-response-output wpcf7-display-none"></div>
</form>
</div>
</div>
        </section>

Answer 1

我可以通过将输入设置为flex来使输入字段侦听父flex-basis: 100%容器。这样，它占用了flex父元素的所有可用空间。

与input[type=number]相比，input[type=text]首先没有获取完整可用宽度的原因我认为是因为数字输入大小属性是不允许的，所以你必须声明它自己在CSS中，如width: 100%。