css - 在 reactjs 中与 css 的位置

Question

大家，我正在做 Reactjs 元素，我想在输入字段中添加提交按钮，但我无法添加，谁能帮我把提交按钮放在输入字段中，在此先感谢我的演示代码, 附上预期和实际结果

Reactjs代码

<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>

---

CSS 代码

.inputContainer {
   position: relative;
}

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

实际结果

预期结果

Answer 1

首先，不要使用 p 作为包装器，使用 div

当您使用 position: absolute 时，您将该元素从流中移除，因此其父级在调整自身大小时不会考虑它。

如果您从 .subscribeIcon 中删除 position: absolute 并将 margin-left: auto 添加到 .subscribeButton，您的 button 应该在其父 .subscribeInputContainer 中正确对齐。

.subscribeInputContainer {
  display: flex;
  flex-flow: row;
  flex: 1;  
  border: 1px solid gray;
  padding: 5px;
}

.subscribeButton {
  margin-left: auto;
}

.subscribeIcon {}

<div class='subscribeInputContainer'>
  <input id="subscribeInput" required={true} value={this.state.value} className={styles.subscribeInput} placeholder={formattedValue} onKeyPress={(e) />

  <div class='subscribeButton' id="btnId">
    <Button variant="primary" class='subscribeIcon' onClick={()=> this.onSubscribe()}>Button</Button>
  </div>

</div>