html - Why are these divs not horizontally aligned? Why do they line break? -

this html:

<div style="border:1px solid blue; margin: auto; height:250px; width:600px;">      <div style="border:1px solid red; height:50px; width:80px;"></div>      <div style="border:1px solid red; height:50px; width:80px;"></div>      <div style="border:1px solid red; height:50px; width:80px;"></div>       <div style="border:1px solid red; height:50px; width:80px;"></div>  </div>

why red divs not in same horizontal row , how them in same row?

ok, divs block elements , use divs containing menus. can add style property called display: inline-block inner divs, , if want divs centered inside container div can use text-align: center. work on type of block elements.

<div style="border:1px solid blue; margin: auto; text-align:center; height:250px; width:600px;">      <div style="border:1px solid red; height:50px; width:80px; display:inline-block;"></div>      <div style="border:1px solid red; height:50px; width:80px;display:inline-block;"></div>      <div style="border:1px solid red; height:50px; width:80px;display:inline-block;"></div>       <div style="border:1px solid red; height:50px; width:80px;display:inline-block;"></div>  </div>