div css如何实现输入的文本框宽度自动调节
发布网友
发布时间：2022-04-30 13:58
共2个回答
热心网友
时间：2022-04-20 20:40
在不借助 Javascript 的情况下要实现你说的效果没有十分完美的解决方案。下面的 DIV + CSS 能够做到，但唯一不足的是你需要在 HTML 中将两个 “按钮” 写在 “收件人/主题” 前面。
#outer {width: 400px; border: 1px solid #000; padding: 5px;}
.inner {overflow: hidden;}
.inner div {padding: 5px;}
.label {float: left; width: 70px;}
.iText {display: block; overflow: hidden;}
.iText input {width: 99%;}
.iButton {float: right; width: 70px; text-align: right;}
</style>
<div class="inner">
<div class="iButton"><input type="button" value="常用地址"></div>
<div class="label">收件人：</div>
<div class="iText"><input type="text" /></div>
</div>
<div class="inner">
<div class="iButton"><input type="button" value="常用主题"></div>
<div class="label">主题：</div>
<div class="iText"><input type="text" /></div>
</div>
</div>
下面这段 Javascript 代码是用于模拟宽度变化，测试用的。
<script type="text/javascript">
window.onload = function() {
document.getElementById("test").onclick = function() {
document.getElementById("outer").style.width = parseInt(Math.random() * 300 + 300) + "px";
};
};
</script>
现在大部分手机浏览器对 Javascript 支持都不错，所以不一定非要用 CSS 来实现，可以考虑使用 Javascript。
热心网友
时间：2022-04-20 21:58
