html - 如何在展开合同时将按钮与文本区域角对齐并保持相同的相对位置

Question

我有一个文本区域，我希望几个按钮始终位于文本区域下方并与文本区域的右下角对齐。我得到的最接近的显示在这个小提琴http://jsfiddle.net/leopardy/2uwDT/1/中 ，但它甚至没有与 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

尝试删除容器的严格宽度，您可以设置 amin-width代替，如果您成功了，display: inline-block或者float: left您可以确保它不跨越其父级的整个宽度。

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

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