cssとreactjsの位置

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コード

取り付けられています。 210

.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

まず、あなたが使用している場合div

を使用し、ラッパーとしてpを使用していませんposition: absoluteあなたはその要素は流れから外れてしまいます。そのため、親は自分自身のサイジング時にそれを考慮しません。

あなたが.subscribeIconからposition: absoluteを削除し、.subscribeButtonにmargin-left: autoを追加する場合は、あなたの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>