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

<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中包装em

{{1}}