使用 css 在 reactjs 中的位置答案

【问题标题】：position in reactjs with css使用 css 在 reactjs 中的位置
【发布时间】：2017-09-23 05:07:53
【问题描述】：

大家，我正在做 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;
}

实际结果

预期结果

【问题讨论】：

从删除position: absolute开始，另外，不要使用p元素作为包装，使用div
嘿@LGSon，你能详细说明一下吗
你的subscribeInputContainer 有display: flex 吗？
是的@LGSon，我已经更新了我的代码，你能检查一下吗

标签： css reactjs flexbox

【解决方案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>

【讨论】：