HTML中TextArea内的按钮

Question

我正在寻找一个结构,其中一个按钮与textarea的右上角对齐.我能够使用CSS定位来做到这一点.当我开始在textarea内部输入时,文本位于按钮下方.有没有办法让文本通常占据文本区域的整个宽度,但是在达到按钮的边界时,会被包裹到下一行？

Answer 1

始终可以选择在内联元素上使用contentEditable属性,而不是<textarea>将其放在浮动按钮旁边.

HTML:

<div>
    <button>press me</button>
    <span contenteditable="true">editable</span>
</div>

CSS:

div {border: 1px solid gray; width: 15em; height: 5em; overflow-y: scroll;}
button {float: right;}

的jsfiddle

Answer 2

假装。将文本区域和按钮包装在包含 div 中并定位元素。然后设置容器 div 的样式，使其看起来像文本区域。这是一个粗略的模型http://jsfiddle.net/LEkAJ/

超文本标记语言

<div class="container">
  <button>Button</button>
  <textarea>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</textarea>
</div>

CSS

.container {
    position:relative;
    width: 300px;
    height: 100px;
    border: 1px solid #ddd;
}
button {
    position:absolute;
    top: 3px;
    right:3px;
    width: 60px;
}
textarea {
    position:relative;
    border:none;
    width:232px;
    height: 95px;
    resize: none;
    outline: none; /* add this to stop highlight on focus */
}