这让我发疯了。我有相同形式的几个兄弟元素，输入字段和div（包含需要保持在同一行的输入字段），但当每个元素应用100％宽度时，它们长度不一样; div与其他div的长度相同，独立输入与其他输入相同。我已经尝试了我能想到的一切，但我无法弄清楚是什么导致了这种行为。它弄乱了我的响应式造型，所以我有点陷入停滞......
如果宽度为100％，并且元素是同一父元素的直接兄弟，则它们应该具有相等的宽度，对吗？在下面的屏幕截图中，“bi-field-div”和“tri-field-div”元素内的输入较短，而不在div内的输入较长，即使div和输入都是子节点相同的表单元素并设置为100％（您在无类别中看到的一个输入，无ID的div仍然呈现相同的长度，就像没有div一样 - 我把它放在那里测试它。）我尝试通过不同的百分比和边距以及填充来扩展div中的输入，但是div本身保持较短的长度，因此其中的输入在某一点上最终会在不同的行上结束;我也摆弄了定位，显示和其他一切，只是不能让这些顽固的东西平等地延伸！
我非常感谢你能给我的任何建设性意见。谢谢。
HTML：
<form>
<!-- pop-out text -->
<div class="div-form">
<p id="call-to-action">SIGN UP</p>
<p id="sub-text">Subrscribe to our newsletter</p>
<div id="bi-field-div">
<input type="text" class="form-field left-inline-field" placeholder="First Name">
<input type="text" class="form-field right-inline-field" placeholder="Last Name">
</div>
<div>
<input type="text" id="email" class="form-field" placeholder="Email">
</div>
<input type="text" class="form-field" placeholder="Phone" >
<div id="bi-field-div">
<input type="text" class="form-field left-inline-field" placeholder="State / Province">
<input type="text" class="form-field right-inline-field" placeholder="Zip">
</div>
<input type="text" class="form-field" placeholder="Company Name">
<input type="text" class="form-field" placeholder="How did you hear about us?">
<input type="text" class="form-field" placeholder="Company Name">
<div id="tri-field-div">
<input type="text" class="form-field tri-field" placeholder="Experience">
<input type="text" class="form-field tri-field" placeholder="Interests">
<input type="text" class="form-field tri-field" placeholder="Referral?">
</div>
<div class="signup-btn-div">
<button id="signup-btn">
SIGN UP
</button>
</div>
<div id="privacy-policy">
<a href="#">Privacy Policy</a>
</div>
</div>
</form>
CSS： Form CSS
在浏览器中显示的内容： Form in browser
