使用css在reactjs中定位

大家好，我正在做Reactjs项目，我想在输入字段中添加submit按钮，但我无法添加，有人能帮我在输入字段中放置submit按钮吗，提前谢谢，我的演示代码，预期和实际结果附在后面

反应JS代码

<div className={styles.subscribeInputContainer}>
                        {I18n.getComponent(
                            (formattedValue) =>
                                <input
                                    id="subscribeInput"
                                    required={true}
                                    value={this.state.value}
                                    className={styles.subscribeInput}
                                    placeholder={formattedValue}
                                    onKeyPress={(e) => this.onKeyPress(e)}
                                    onChange={(e) => this.onEmailChange(e.target.value)}
                                />,
                            'footer.your-email-address',
                            {},
                            'Enter Your email address'
                        )}

                        <p className={styles.subscribeButton} id="btnId">
                            <Button variant="primary" className={styles.subscribeIcon} onClick={() => this.onSubscribe()}>Button</Button>
                        </p>

                    </div>

实际结果

预期结果

---

首先，不要使用

p

作为包装，使用

div

当您使用

position:absolute

时，您会将该元素排除在流之外，因此，在调整自身大小时，其父元素不会将其考虑在内

如果从

.subscribebicon

中删除

位置：绝对

，并将

边距左：自动

添加到

.subscribebebebutton

，则您的

按钮

应在其父级

.subscribebeinputcainer

中正确对齐

.subscribeInputContainer{
显示器：flex；
柔性流：行；
弹性：1；
边框：1px纯色灰色；
填充物：5px；
}
.订阅按钮{
左边距：自动；
}
.subscribeCon{}

此.onSubscribe（）}>按钮

从remove

position:absolute

开始，另外，不要使用

p

元素作为包装，使用

div

嘿@LGSon，你能详细说明一下你的

订阅输入容器
有
显示：flex
？是的@LGSon，我已经更新了我的代码，你能检查上面吗
.inputContainer {
   position: relative;
}

.subscribeIcon {
   position: absolute;
   right: 10px;
}
.subscribeInputContainer {
    display: flex;
    flex-flow: row;
    flex: 1;
    font-size: $fontSize-lg;
    color: $color-body;
}