大佬教程收集整理的这篇文章主要介绍了css – 如何使文本输入w /按钮在响应div中自动调整大小,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
一般的HTML / CSS是:
<style> #container { width: 100%; } #text { float: left; } #btn { float: left; overflow: hidden; } </style> <div id="container"> <div id="text"><input type="text" /></div> <div id="btn"><input type="submit" /></div> </div>
视觉:
+---------------- container (autosize) --------------+ | +------------------------------------------------+ | | | text (autosize) | btn | | | +------------------------------------------------+ | +----------------------------------------------------+
期望的行为:
容器div将根据显示宽度自动调整大小 – 这已经处理完毕. btn div的大小与按钮的宽度完全相同 – 这也已经完成了.
我想文本输入div自动调整文本输入是文本div的100%.
这可能吗?我想我已经提供了足够的信息,但我很乐意提供所需的任何其他细节.我已经在这方面工作了好几个小时,此时我很沮丧.
编辑
我可能没有足够清楚地解释所期望的行为.
#container width根据显示宽度而变化.这已经完美地发生了.它可以是960px宽度,一直到320px宽度.
#btn不是固定宽度.它将一直定位到#container的右边缘.
#text width需要自动调整大小以占用#container左边和#btn右边距之间的整个宽度.
a)添加一个充当表行的包装器div:
<div id="container"> <div id="temp"> <div id="text"><input type="text" /></div> <div id="btn"><input type="submit" /></div> </div> </div>
b)将div设置为table,table-row和table-cell
#container { display: table; width: 100%; } #temp { display: table-row; } #text,#btn { display: table-cell; }
c)将第一个单元格的宽度设置为100%;这使得单元尽可能宽,同时保持其他单元尽可能窄:
#text { width: 100%; }
d)将输入框设置为100%:
#text input { width: 100%; }
e)改进.
以上是大佬教程为你收集整理的css – 如何使文本输入w /按钮在响应div中自动调整大小全部内容,希望文章能够帮你解决css – 如何使文本输入w /按钮在响应div中自动调整大小所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。