همونطور که میدونید در حالت عادی هر DIV در یک خط جداگانه قرار میگیره . برای نمایش div ها در یک خط(لاین) از این روش استفاده کنید:

<style>
    .box1{
    width:20px;
    height:20px;
    font-size: 12px;
    color:black;
    background:#D7E5F0;
    border:.1em solid red;
    padding:30px;
    font-weight: bold;
     
    float: left;
    }
    </style>
     
    <body>
    <div id="div1" class="box1">Div 1.</div>
    <div id="div2" class="box1">Div 2.</div>
    <div id="div3" class="box1">Div 3.</div>
    <div id="div4" class="box1">Div 4.</div>
    </body>