I'm currently developing a web page that needs to display an unknown number of items using the ul/li HTML tag. Here are my requirements:
- The list should utilize as much horizontal space as possible
- The list must be horizontally centered, even if line breaks are necessary (no extra space on the right side of the rightmost li entries)
- The width of the li items should be fixed
- The li elements should be left-aligned
However, I've encountered some challenges:
- The line breaks are dependent on the browser size, making it impossible to determine when to insert a new line after every nth-li element
- If a line break occurs, the width of the ul element (or surrounding div element) is increased, causing the horizontal center alignment to be lost
To illustrate my issue, here's a code snippet: https://jsfiddle.net/07yfv9gr/3/
<div style="border: 1px solid black; display: inline-block; width: 500px; text-align: center;">
<ul style="list-style: none outside none; margin: 0px; padding: 0px; display: inline-block; border: 1px solid green; text-align: left;">
<li style="width: 135px; display: inline-block; border: 1px solid red;">Element 1</li>
<li style="width: 135px; display: inline-block; border: 1px solid red;">Element 2</li>
...
</ul>
</div>
In the above example, automatic line breaks are added after every third, sixth, ninth, and twelfth element, causing empty spaces next to those elements and preventing proper horizontal centering.
I am aiming for a layout similar to this: https://jsfiddle.net/7L1su8zp/5/
<div style="border: 1px solid black; display: inline-block; width: 500px; text-align: center;">
<ul style="list-style: none outside none; margin: 0px; padding: 0px; display: inline-block; border: 1px solid green; text-align: left;">
<li style="width: 135px; display: inline-block; border: 1px solid red;">Element 1</li>
...
</ul>
</div>
Unfortunately, inserting line breaks after each nth element isn't feasible due to the dynamic nature of the browser width. If you have any suggestions or solutions, please let me know!