如何在扩展合同时将按钮对齐到textarea角并使其保持在相同的相对位置

Question

我有一个textarea,我想要几个按钮,总是在textarea下面,并与文本区域的右下角对齐.我得到的最接近的是这个小提琴http://jsfiddle.net/leopardy/2uwDT/1/, 但是它甚至没有与textarea一致向右对齐,更糟糕的是当我通过调整大小抓取器调整textarea的大小时右下角的三角形,我将文本区域的右侧向右或向左移动)按钮变得更加偏向(甚至更远离textarea的右侧).需要注意的是,textarea必须能够调整大小,我不能在一定的大小.

HTML

<div class="descriptionarea">
    <span class="namefortxtarea">Description</span>
    <textarea ></textarea>
    <span class="buttonfortxtarea"><button class= "btn btn-mini description_edit">Edit</button><button class= "btn btn-mini description_submit">Submit</button></span>
</div>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.descriptionarea {
   width: 490px;
   position: relative;
}

.descriptionarea textarea{
    width: 490px;
    height: 20px;
}

.descriptionarea span.namefortxtarea{
    display: block;
    text-align: left;
    font-size:12px;
}

.descriptionarea span.buttonfortxtarea{
    display: block;
    text-align: right;
}

Answer 1

尝试删除容器的严格宽度,您可以设置min-width代替,如果您创建它,display: inline-block或者float: left您可以确保它不跨越其父级的整个宽度.

http://jsfiddle.net/2uwDT/2/

.descriptionarea {
    min-width: 490px;
    position: relative;
    display: inline-block;
}