div对齐不正确

Question

我想要-框正好位于+框的正下方，如所附图片所示

我已经尝试过下面给出的这段代码，但是不起作用。 有人可以告诉我我需要在CSS中进行哪些更改。 这是reactjs应用程序的一部分。

<div style={{width:"20%",float:"left"}}>
                   <input type="text" style={{width:"50px",height:"60px",marginLeft:"20px",marginTop:"20px",float:"left"}}/>
                   <div style={{fontSize:"25px",fontWeight:"bold", width:"30px",float:"left",border:"1px solid #eee", marginTop:"20px",marginLeft:"5px",textAlign:"center"}}><a href="#" style={{textDecoration:"none"}}>+</a></div>
                   <div style={{fontSize:"25px",fontWeight:"bold", width:"30px",float:"left",border:"1px solid #eee", marginTop:"20px",marginLeft:"5px",textAlign:"center"}}><a href="#" style={{textDecoration:"none"}}>-</a></div>
                 </div>

Answer 1

将+/-框包装在div并使用display: flex和flex-direction: column包装div上的flex-direction: column样式

<div style={{width:"20%",float:"left"}}>
    <input type="text" style={{width:"50px",height:"60px",marginLeft:"20px",marginTop:"20px",float:"left"}}/>
    <div style={{display: 'flex', flexDirection: 'column' }}>
        <div style={{fontSize:"25px",fontWeight:"bold", width:"30px",float:"left",border:"1px solid #eee", marginTop:"20px",marginLeft:"5px",textAlign:"center"}}><a href="#" style={{textDecoration:"none"}}>+</a></div>
        <div style={{fontSize:"25px",fontWeight:"bold", width:"30px",float:"left",border:"1px solid #eee", marginTop:"20px",marginLeft:"5px",textAlign:"center"}}><a href="#" style={{textDecoration:"none"}}>-</a></div>
    </div>
</div>

Answer 2

带有Flex的div中的Wrapp em

<div style={{ display: 'flex', flexDirection: 'column' }}>

</div>