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

Question

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

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

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

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-basis: 100%，我能够让输入字段监听父 flex 容器。这样，它会获取 flex 父元素的所有可用 space。

与 input[type=text] 相比，input[type=number] 一开始没有占用全部可用宽度的原因我相信是因为数字输入大小属性是不允许的，所以你必须声明自己在 CSS，比如 width: 100%.

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

Setting the input type to be a number makes the input width shorter

html

css

forms

input-field

flexbox