如何调整按钮，textarea的角落，并保持在同样的相对位置，同时扩大合同 [英] How to align button to textarea corner and keep it in same relative position while expand contract

问题描述

我有一个textarea，我想了几个按钮，永远是文本区域下方，并与文本区域的右下角对齐。最近我得到的是显示在该提琴 http://jsfiddle.net/leopardy/2uwDT/1/ 但即使没有对准一路向右符合textarea的，更糟糕​​的时候我调整通过对右下角的大小调整抓取三角textarea的，我将文本区域的行权要么向左或向右）按钮变得错位甚至更高（进一步远离右侧的文字区域）。 其中值得注意的是，文本区域必须能够调整大小，我不能把它在一个集大小。

HTML

＆LT; D​​IV CLASS =说明房间＆GT;     ＆LT;跨度类=namefortxtarea＆GT;简介＆LT; / SPAN＆GT;     ＆LT; textarea的＆GT;＆LT; / textarea的＆GT;     ＆LT;跨度类=buttonfortxtarea＆GT;＆LT;按钮类=BTN BTN迷你description_edit＆gt;编辑＆LT; /按钮＆GT;＆LT;按钮类=BTN BTN迷你description_submit＆GT;提交＆LT; /按钮＆GT;＆LT; / SPAN＆GT; ＆LT; / DIV＆GT;

CSS

@import的url（'http://twitter.github.com/bootstrap/assets/css/bootstrap.css ）; .descriptionarea {    宽度：490px;    位置：亲属; } .descriptionarea的textarea {     宽度：490px;     高度：20像素; } .descriptionarea span.namefortxtarea {     显示：块;     文本对齐：左;     字体大小：12px的; } .descriptionarea span.buttonfortxtarea {     显示：块;     文本对齐：右; }

解决方案

尝试取出容器严格的宽度，可以设置最小宽度来代替，如果你把它显示：inline-block的或浮动：左可以确保它不会跨越其母公司的整个宽度

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

  .descriptionarea {
    最小宽度：490px;
    位置：亲属;
    显示：inline-block的;
}
 

I have a textarea and I want a couple of buttons to always be below the textarea and aligned with the text area's bottom right corner. The closest I got is shown in this fiddle http://jsfiddle.net/leopardy/2uwDT/1/ but its not even aligned all the way to the right in line with the textarea and worse when I resize the textarea via the resize grabber triangle on the bottom right corner, and I move the right line of the text area either to the right or left) the buttons become misaligned even more(even further away from right side of the textarea). One note is that the textarea has to be able to be resized, I can't have it at a set size.

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

解决方案

Try removing the container's strict width, you can set a min-width instead and if you make it display: inline-block or float: left you can make sure it doesn't span the entire width of its parent.

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

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

这篇关于如何调整按钮，textarea的角落，并保持在同样的相对位置，同时扩大合同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！