0

I'm working on a page where I want list an unknown number of items using the ul/li html tag. What I want to is the following:

  • The list should use as much horizontally as possible
  • The list should be centered horizontally, even if line-breaks are needed (no space on the right side of the most right positioned li-entries)
  • The width of the li-items is fixed
  • The li-elements are left-aligned

But I ran into some problems:

  • The line-break depends on the size of the browser, so I cannot say I'm going to insert a new line every nth-li element
  • If a line break is needed, the width of the ul-element (or div-element surrounding it is increased, so it's not centered horizontally)

I've the following code that illustrates my problem: 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>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 3</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 4</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 5</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 6</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 7</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 8</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 9</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 10</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 11</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 12</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 13</li>
    </ul>
</div>

Note: The width is fixed to 500px for illustration pruposes only on jsfiddle. It should be 90% or similar.

In the example above, line-breaks are inserted automatically after element 3, 6, 9 and 12. But it automatically increases the size of the surrounding div, so I've an empty space next to element 3, 6, 9 and 12. Hence, it's not possible to center the div horizontally :(

What I want is something like 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>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 2</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 3</li>
        <br />
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 4</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 5</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 6</li>
        <br />
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 7</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 8</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 9</li>
        <br />
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 10</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 11</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 12</li>
        <br />
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 13</li>
    </ul>
</div>

But as I already mentioned, I can't insert line-breaks after each nth-element because I want to show as much li-elements per line as possible, depending on the width of the browser.

I hope anyone knows a good solution for me problem :)

Nrgyzer
  • 783
  • 1
  • 14
  • 38
  • Related - http://stackoverflow.com/questions/19527104/left-aligned-last-row-in-centered-grid-of-elements?rq=1 – Paulie_D Oct 02 '16 at 09:27
  • I'm sorry, I copied the wrong code-section (my tryout with div-elements). I adjusted the code and urls above to show using the unsorted list solution which is my prefered one. But I think I can also work with the div-solution. – Nrgyzer Oct 02 '16 at 09:54
  • I think you will need to use some js to solve this. I was trying to do it with css just now and have not yet had success – dewwwald Oct 02 '16 at 10:26
  • I guess the solution to your prpblem is using the flexbox model -> https://css-tricks.com/snippets/css/a-guide-to-flexbox/ No JS required. – Hans Meiser Oct 02 '16 at 11:12

1 Answers1

0

"The width of the li-items is fixed"

Then just use CSS media queries to detect the with of the browser and to see how many list items will fit.

There are screen resolution usage statistics in the Internet. So you see most used widths and make your website looks good on those like: 1366, 1920, 1280, 1440, 1600, 1024, 1680, 1360

Stoycho Trenchev
  • 557
  • 4
  • 12
  • The CSS media queries seem to be a good choice but how to do that? I never found any solution that faced this or a similar problem, except this one: http://jsfiddle.net/webtiki/KrA6M/14/ But if so, I need to add many @media-sections... – Nrgyzer Oct 02 '16 at 13:01