html - 如何在文本区域内放置一个 float 按钮？

Question

我需要做这个:

使用 Vue 框架和 postcss 预处理器。

我正在尝试在此处找到的具有 contenteditable 跨度的变体 - Button inside TextArea in HTML但是按钮没有 float ，文本只是隐藏在按钮下面，就像它具有绝对定位一样:

<div class="feedback__textarea">
  <app-btn theme="deepwater" class="feedback__btn">Отправить</app-btn>
  <span contenteditable="true"
        class="feedback__input"
        id="feedback-form-message"
        name="message"></span>
</div>

.feedback__textarea {
    position: relative;
    height: 150px;
    background-color: var(--white);
}

.feedback__textarea .feedback__input {
    position: relative;
    top: -60px;
    display: inline-flex;
    width: 100%;
    height: 150px;
    color: var(--dark-grey);
    word-break: break-all;

    &:focus {
        outline: none;
    }
}

.feedback__btn {
    float: right;
    position: relative;
    top: 90px;
}

Answer 1

您可能期望这样:

https://codebrace.com/editor/b09138c60

<iframe width="100%" height="300" src="//codebrace.com/embed/b09138c60/?12px&amp;wordwrap&amp;html&amp;css&amp;xcode&amp;focus=css" allowtransparency="true" allowfullscreen="true" style="background-color:transparent; overflow: hidden;margin: 0;" title="" frameborder="0"></iframe>

所以我将文本区域放置在 div 容器中，position: relative 并将“feedback__btn”作为 position: absolute 放置在右下角。

更新的解决方案: https://codebrace.com/editor/b0b504fb2

向文本区域添加边距底部将使按钮不隐藏文本区域。我已经更新了解决方案供您引用。我希望这能解决您的问题 :)。