我有<h1/>和<input/>元素，输入文字后，<button/>出现/显示
尽管您可能必须根据整个HTML结构和CSS样式进行一些更改，但是您可以
<div style={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
<div>
<h1>Do Not Move Me</h1>
<input
placeholder='Enter Name'
onChange={this._displayButton}
value={this.state.nameText}
/>
</div>
<div>
{this.state.textEntered ?
<button
type="submit"
/>
: null
}
</div>
</div>
我所做的主要更改是将flexDirection从更改row为column，这使div子级/子div彼此下方而不是彼此相邻。
编辑：
<div style={{display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'flex-start'}}>
增加的justifyContent属性。
<div style={{display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
<h1>Do Not Move Me</h1>
<div style={{ position: 'relative', marginLeft: 20 }}>
<input
placeholder='Enter Name'
onChange={this._displayButton}
value={this.state.nameText}
/>
{this.state.textEntered ?
<button type="submit" style={{ position: 'absolute', top: '-10px', right: '-10px', borderRadius: '50%', height: 40, width: 40, backgroundColor: '#881587', border: 'none' }} /> : null
}
</div>
</div>
您必须编辑button样式以使其看起来像您想要的方式。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句