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

Question

我有这个 html:

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

我想要 textarea { with: 100%; } 但只有一行按钮。 怎么把这三个元素排成一行，那textarea会占用最大的空间吗？ 如何在 CSS 中实现？

Answer 1

如果你只是targeting Chrome, Firefox and 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;
}

More about compatible situation

---

编辑:

如果你真的需要这个，并且真的需要针对其他浏览器，这里有一个使用 <table> 的丑陋解决方案相反:

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