CODEWITHSUNDEEP
htmlcssreactjs
hitesh
hitesh

Reputation: 499

div alignment is not coming properly

I want - box to come exactly below + box as shown in the attached image

enter image description here

I have tried this code given below but does not work. Can someone tell me what changes I need to make in the css. This is part of reactjs application.

<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>

Upvotes: 1

Views: 51

Answers (2)

ivica.moke
ivica.moke

Reputation: 1064

Wrapp em in div with flex

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

</div>

Upvotes: 1

Shubham Khatri
Shubham Khatri

Reputation: 281606

Wrap your +/- boxes in a div and use display: flex with flex-direction: column styles on the wrapper div like

<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>

Upvotes: 2

Related Questions