I use the list to present the menu bar:
<ul id="p" style="border-top:none; border-bottom:none;">
<li id="c1" class="list"><a href="#">abc</a></li>
<li id="c2" class="list"><a href="#">def</a></li>
<li id="c3" class="list"><a href="#">ghi</a></li>
<li id="cx" class="list"><a href="#">xyz</a></li>
When displyed, it shows:
abc def ghi ... xyz
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.