Html 文本区域100%宽，带边距

我试图显示一个右边有图标的文本区域，如下所示：

textarea值始终设置为100%，需要跨越全屏宽度减去不同设备上的图标宽度。问题是图标被切断，因为textarea占用了所有空间

我很想使用calc（）函数（减去100%图标宽度），但我们需要支持android和iOS的早期版本

我完全可以将图标范围定位到右侧，但它无法覆盖文本区域，因为文本区域中可能会出现滚动条。我希望在文本区域的右边加一个边距和边框框，这样在文本区域仍然占据100%宽度的情况下，就有足够的空间来放置图标。这不是预期的效果

除了添加/删除类之外，我无法更改HTML结构。请看下面的小提琴

<div>
     <textarea></textarea>
     <span class="icon-container">
         <span class="icon"></span>
     </span>
</div>

---

谢谢您的帮助

您可以给容器添加一些填充物

在包含文本框和按钮的位置制作一个

，将其设置为100%宽度

---

这应该可以解决问题，只需将这些元素添加到相应的元素中即可：

textarea {   
float:left;
}

span.icon-container {
    float:left;
}

---

检查小提琴：

谢谢，这可能是一个选项。好像我想得太多了：-）我会尽力让你知道的。

textarea {   
float:left;
}

span.icon-container {
    float:left;
}