css - 一行输入，100% 和 CSS 中的按钮

Question

我有这个html：

<textarea>One line</textarea>
<button>One</button>
<button>Two</button>

我想要textarea { with: 100%; }但只有一条带按钮的线。这三个元素怎么排列在一行中，那textare占用的空间最大呢？如何在 CSS 中做到这一点？

Answer 1

如果您只针对 Chrome, 火狐和 Opera，您可以使用flex：

http://jsfiddle.net/vhbtG/

<div class="container">
    <textarea rows="1"></textarea><button>One</button><button>Two</button>
</div>

div.container {
    display:-webkit-flex;
    display:flex;
    -webkit-flex-direction:row;
    flex-direction:row;
}
div.container > textarea {
    -webkit-flex:1 1 auto;
    flex:1 1 auto;
}
div.container > button {
    -webkit-flex:0 1 auto;
    flex:0 1 auto;
}

更多关于兼容情况

---

编辑：

如果你真的需要这个，并且真的需要针对其他浏览器，这里有一个丑陋的解决方案，可以<table>代替：

http://jsfiddle.net/vhbtG/1/