How can I prevent css from automatically wrapping code?

An example of line feed after the floating layer is added with margin:

For example, a DIV with a width of pixel PX contains a menu list with a width of 60px and a margin-right value of 20px. If we use the following HTML structure, can this menu list be completely displayed in one line of this DIV?

 

  
<Div>
  
<Div> mb5u1 </div>
  
<Div> mb5u2 </div>
  
<Div> mb5u3 </div>
  
<Div> mb5u4 </div>
  
<Div> mb5u5 </div>
  
</Div>
 

The total width of each menu is 80 PX, and the total length of the five menus is PX, while that of the parent layer is only px, according to the floating principle, the 5th menus will be pushed down without a doubt, that is, line breaks.

Let's take a look at my solution:

The code is as follows:

 

  
<Div>
  
<Div class = "overflowDiv">
  
<Div> mb5u1 </div>
  
<Div> mb5u2 </div>
  
<Div> mb5u3 </div>
  
<Div> mb5u4 </div>
  
<Div> mb5u5 </div>
  
</Div>
  
</Div>
 

The width of the parent layer is pixel PX, the overflowDiv width of the mask layer is set to 400px for the menu, and the overflow is set to hidden. Therefore, it is natural that the 20 more pixels of the mask layer are not displayed.

The menu is in the PX width.