如何將按鈕對齊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; 
}