How to implement horizontal scrolling using ul, li, and div layout_html/css_WEB-ITnose

The web page structure is as follows:


After clicking to add a child node, the child node will be automatically inserted in the picture above. The structure of the child node is the same as the structure of ul in the picture above. See the figure below for details:


As child nodes are continuously inserted, the page width will become wider and wider, but once it reaches the width of the browser, it will automatically wrap, so the original structure will change , the effect I want is not to wrap, and the page can scroll horizontally if it exceeds the width of the browser.
Before the browser width is exceeded:

After the browser width is exceeded:


Does anyone know how to solve this problem?

Reply to discussion (solution)

I can’t understand the code you posted... Does this have anything to do with scrolling?

http://www.jq22.com/plugin/3498/demo

Check this out.

I can’t understand the code you posted... Does this have anything to do with scrolling?

Looking at the last two pictures, once the page width exceeds the browser width, the page will automatically Line wrap, but this will destroy the original structure. The effect I hope is that after the page width exceeds the browser, a horizontal scroll bar will automatically appear, and the page can be dragged left and right without destroying the structure of the original page.

After dynamically changing the body width, a scroll bar will appear on the browser. Do you think the horizontal scroll bar is disabled, or is the body width 100%?