html - 如何在展开契约(Contract)时将按钮与文本区域 Angular 对齐并使其保持在相同的相对位置

Question

我有一个文本区域，我希望几个按钮始终位于文本区域下方并与文本区域的右下角对齐。我得到的最接近的显示在这个 fiddle 中 http://jsfiddle.net/leopardy/2uwDT/1/但它甚至没有一直与文本区域对齐，更糟糕的是，当我通过右下角的调整大小抓取器三 Angular 形调整文本区域的大小时，我将文本区域的右行向右或向左移动) 按钮变得更加错位(甚至离文本区域的右侧更远)。需要注意的是，文本区域必须能够调整大小，我不能将它设置为固定大小。

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;
}