使身体宽度对应于divs存在

Question

我为每个信息创建了一个带有点的水平时间线，但是，如果创建了足够的“点/信息”，则主体宽度需要能够扩展以使点在时间线的同一行上连续而不是向下移动行，因为页面的宽度有限。

我尝试给主体更大的宽度，它确实解决了问题，但是我宁愿让宽度动态地工作以与时间线的点相对应。因此，如果时间轴上只有几个点，则页面不必再宽一些，但是如果有很多点，则页面宽度应该扩大。

这是我时间​​轴的CSS。 时间是用PHP和HTML实现的。点是通过简单的php sql循环创建的。

 div#timeline3 {
 background-color: lightblue;
 margin-top: 150px;
 height: 12px;
 width: 100%;
        top: 0px;
   position: relative;


      }
 div#timeline3 .inside {
   position: absolute;
   height: 4px;
   background-color: #fff;
   width: 0%;
   top: 3px;
   left: 0;
 }




 div#timeline3 .dot {
   z-index: 99;
   transition: 0.3s ease-in-out;
   width: 52px;
   height: 52px;
   border-radius: 50%;
   position: relative;
   top: -20px;
   margin-left: 220px;
   float: left;

   text-align: center;
   cursor: pointer;
   -webkit-box-shadow: 8px 0px 05.3px -8px black, -8px 0px 05.3px -8px black;
    -moz-box-shadow: 8px 0px 05.3px -8px black, -8px 0px 05.3px -8px black;
    box-shadow: 8px 0px 05.3px -8px black, -8px 0px 05.3px -8px black;
 }
 div#timeline3 .dot:nth-child(1) {
   left: 1%;
   background-color: lightblue;

 }