The problem is, it works for the monitor 15 inch or above. When the monitor size goes below the 15, such as 14 inch, the menu items wraps such that it becomes:
abc def ghi ...
I would like to get two methods:
1) stretchable. The menu items can dynamically stretch along with the monitor's size such that the gap between the items becomes wider or narrower. Nevertheless, they can all remain on the same line.
2) non-stretchable. Regardless the size of the monitor, the menu items will always stay on the same line. When the monitor's size becomes smaller, the user can use the horizontal scrollbar to view the rest of the menu items.
How can I do it?
P.S. Do not know how the 'Angry' face icon got there. Please do ignore it.
This is not technically a problem with the monitor size, it is a problem with the browser window size.
1) You can specify your LI items as a percentage of the window size, rather than as fixed width in pixels.
2) you can specify the container of this UL in fixed pixels, large enough to contain the UL horizontally.