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

【问题标题】：Setting the input type to be a number makes the input width shorter将输入类型设置为数字使输入宽度更短
【发布时间】：2018-07-24 23:55:52
【问题描述】：

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

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

这是设置数字输入类型后的样子：

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>

【问题讨论】：

请编辑帖子并在此处粘贴您的 HTML，以便人们能够更好地提供帮助。谢谢！
@RoniLaukkarinen 我的错，给你。已编辑。
你需要使用width: 50%，来覆盖它们的默认值
@LGSon 数字输入本身的宽度？在那种情况下，它会变得更短
如果您使用 working 代码 sn-p 更新问题，重现您描述的问题，我们将能够提供正确的答案。我也重新打开了这个问题。

标签： html css forms flexbox input-field

【解决方案1】：

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

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

【讨论】：