Link to home
Start Free TrialLog in
Avatar of SAbboushi
SAbboushiFlag for United States of America

asked on

How to add list item before the first list item displayed on each line

I am using php to create an unordered list (<ul>) where the list items are displayed horizontally (display: inline-block).

As I zoom, list items will jump from one line to the next.

How can I cause the first list item of all lines other than the first line to be indented?  It seems I cannot do this with php, so maybe I can have an empty list item (<li></li>) between each list item with a zero width in which case, is there something within css or javascript that would allow me to:

1) make sure that zooming always results in an empty <li> being the first item on a line (i.e. don't break between <li></li><li>content</li>

2) set the width of the first empty item on all lines other than the first to e.g. 20px

Avatar of COBOLdinosaur
Flag of Canada image

You have three options, and you are probably not going to like any of them.

Learn to live with what you have.
Make the page rigid by applying absolute width in pixels to everything, so nothing wraps.
Use large enough fonts and graphics so that people with normal vision do not need to zoom to see the detail

I recommend the third options because it is best practice.  How many of your user actually need to zoom the page? If it is a large number than your design is probably not very good from an accessibility point of view.  If it is a small number than there is nothing to worry about because user with vision problems are either using reader devices, or are used to the shifts caused by zooming.

Avatar of SAbboushi
Flag of United States of America image

Link to home
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of SAbboushi


Solution found elsewhere