Question

我可以使用固定大小的行div，输入会自动调整大小以占用可用空间，但行div中的所有内容都在同一行吗？（下面的第一行与第二行的宽度相同，因为第二行的输入会自动收缩）。

<div class="row">
    <input type="text" />
</div>

<div class="row">
    <span class="leftText">Text</span>
    <input type="text" />
</div>

http://jsfiddle.net/CqCax/

Answer 1

试试这个

- HTML

<div class="row">
    <input type="text" />
</div>

<div class="row">
    <span class="leftText">Text</span>
    <input type="text" />
</div>

- CSS

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.row {
    display:table;
    width: 200px; 
}
span {
    width: 1%;
    padding-right: 10px;
}
input, span {
    display:table-cell;
} 
input {
    width: 100%;
}

http://jsfiddle.net/9aAse/4/

这有点像hacky。

Answer 2

当然可以。

display: -webkit-flex;

完整代码： http://jsfiddle.net/frapporti/gXLeK/

自动调整文本框大小以适合可用空间

2 个答案: