在textarea中按钮的绝对定位

Question

上图中的齿轮按钮位于textarea元素内的绝对位置，但文本与其重叠。我不想申请填充权限。 我是HTML和CSS的新手。如何使用齿轮按钮停止文本折叠。

Answer 1

我使用其他方法创建了DEMO。

我创建了一个具有相对定位的包装元素，为其赋予边框并将其宽度设置为300px。然后创建一个没有任何边框的textarea元素，并将其宽度设置为280px，以便将您的齿轮（绝对定位，float:right）放置在右上角，这样文本就不会与您的按钮重叠。

<强> HTML：

<div class='wrapper'>
    <textarea class='textarea'></textarea>  
    <img src='https://cdn3.iconfinder.com/data/icons/unicons-vector-icons-pack/32/settings-128.png' class='img'>
</div>

<强> CSS：

.wrapper{
    width:300px;
    height:auto;
    border:1px solid red;
    position:relative;  

}

.textarea{
    position:relative;
    width:280px;
    height:100px;
    border:0px solid;
    resize:none

}

.img{
    float:right;
    position:absolute;
    width:20px;
    height:20px;

}

Answer 2

你真的无法摆脱padding，因为这是你的正确做法。 （请说明为什么不想使用padding？）

检查此代码，也许您会发现将图标用作background-image会更优雅。 您可以使用width，height和padding-right值：

HTML部分：

<textarea>hello hksjf askdjfj akldfla </textarea>

CSS部分：

textarea {
    width: 100px;
    height: 50px;
    padding-right: 20px;
    background-image: url('http://www.isilo.com/support/manual/iSiloIP/img/gearIcon.gif');
    background-position: top right;
    background-repeat: no-repeat;
}

同样在jsFiddle中： http://jsfiddle.net/nQkEG/

Answer 3

你不能。 使用padding-right上的textarea或float的{​​{1}}按钮。