html – style =“width：100％”正在拉伸包含div.我不想要它

概述我的真实项目不是使用嵌入式样式或背景颜色.这些已添加用于仅用于故障排除目的. 从下面的代码开始,一切都很好,除了第二个文本输入感觉有点短.所有其他文本输入都会延伸以填充浏览器窗口.我不希望它这样做,但我希望它只是填充我用红色着色的部分.因此一直向右伸展,但不是一直向左伸展. <label for="phoneNumber">Home Phone</label><div style="backgr 我的真实项目不是使用嵌入式样式或背景颜色.这些已添加用于仅用于故障排除目的.

从下面的代码开始,一切都很好,除了第二个文本输入感觉有点短.所有其他文本输入都会延伸以填充浏览器窗口.我不希望它这样做,但我希望它只是填充我用红色着色的部分.因此一直向右伸展,但不是一直向左伸展.

<label for="phoneNumber">Home Phone</label><div >	<div >(<input  type="tel" name="ext" ID="phoneNumberExt" autocomplete="tel">)</div>	<div ><input type="tel" name="phone" ID="phoneNumber" autocomplete="tel"></div></div>

鉴于我希望文本输入填充100％的父div(即红色区域),我的第一直觉是写style =“wIDth：100％;”但这没有达到预期的效果.见下文.

<label for="phoneNumber">Home Phone</label><div >	<div >(<input  type="tel" name="ext" ID="phoneNumberExt" autocomplete="tel">)</div>	<div ><input  type="tel" name="phone" ID="phoneNumber" autocomplete="tel"></div></div>

如何使文本输入填充红色显示的区域？

解决方法 使用如下所示的flex.

在父div上添加display：flex,flex：1 0 auto;在第二个输入的父div上,第二个输入的宽度为100％.

<label for="phoneNumber">Home Phone</label><div >  <div >(<input  type="tel" name="ext" ID="phoneNumberExt" autocomplete="tel">)</div>  <div >    <input type="tel" name="phone" ID="phoneNumber" autocomplete="tel" ></div></div>

总结

以上是内存溢出为你收集整理的html – style =“width：100％”正在拉伸包含div.我不想要它全部内容，希望文章能够帮你解决html – style =“width：100％”正在拉伸包含div.我不想要它所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。