Question

div css如何实现输入的文本框宽度自动调节

由于是手机应用，所以全部都是用DIV+CSS实现。
左边“收件人”和右边“常用地址”固定宽度，当中的文本框自动调节宽度，以充满屏幕。

我是N年前学的，之知道td、tr，想学习div+CSS，但是实在没有搞懂，我小白。

谢谢

Answer 1

在不借助 Javascript 的情况下要实现你说的效果没有十分完美的解决方案。下面的 DIV + CSS 能够做到，但唯一不足的是你需要在 HTML 中将两个 “按钮” 写在 “收件人/主题” 前面。

<style type="text/css">
#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 id="outer">
    <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 代码是用于模拟宽度变化，测试用的。

<input type="button" id="test" value="模拟宽度变化" style="margin-top: 100px;" />
<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。

Answer 2

用百分比来制定文本框的高度