使用css在html中的输入文本字段顶部定位按钮时出现问题

Question

我有这个html文件，其中我放置了input text字段，此输入文本字段旁边有一个button。

<div id="compose-message">
     <label for="new-input-message">{{gettext('Message')}}</label>
     <input type="text" id="new-input-message" class="speech-input" aria-describedby="new-input-message-help-block" name="eng-input" disabled="false">
     <small id="new-input-message-help-block" class="form-text text-muted">{{gettext('Hit enter to send message')}}</small>
</div>

我在css和JS文件中有这些css元素，我在其中指定输入文本框和按钮的大小和位置：

FOR BUTTON

element.style {
    cursor: pointer;
    top: 4.8px;
    width: 38.4px;
    height: 38.4px;
    /* position: relative; */
}
.si-wrapper button {
    position: absolute;
    right: 0;
    margin: 0;
    border: 0;
    padding: 0;
    background: none;
    font: 0/0 a;
} 

FOR INPUT TEXT FIELD

element.style {
    padding-right: 36.4px;
}
.speech-input {
    width: 450%;
    position: relative;
    height: auto;
    box-sizing: border-box;
    padding: 10px;
    font-size: 16px;
    margin: 0;
}

这会创建如下所示的字段：

我想要的是将按钮放在输入文本字段的末尾，但我无法将其定位。我需要做哪些修改来定位它？

注意：我在GITHUB LINK处使用语音输入api。为了增加输入文本字段的宽度，我使用以下内容修改了speech-input文件中的speech-input.css类：

.speech-input {
        width: 450%;
        position: relative;
        height: auto;
        box-sizing: border-box;
        padding: 10px;
        font-size: 16px;
        margin: 0;
    }

Answer 1

从GitHub网站上看，作者正在使用此css将按钮放在右侧：

position: absolute;
top: 0; 
right: 0;
height: 18px;
width: 18px;
margin: 0;
border: 0;
padding: 0;
background: none;
font: 0/0 a;