HTML：圍繞無序列表與數目不詳的水平

Question

我正在一個網頁，我想列出一個未知號碼使用UL /李HTML標記的項目上的元素。我想是這樣的：

• 列表應儘可能多的水平儘可能
• 名單應水平居中，即使換行符需要（在最右側沒有空間使用右定位鋰條目）
• 鋰物品的寬度是固定的
• 鋰元素左對齊

但是我遇到一些問題：

• 斷行取決於瀏覽器的大小，所以我不能說我要插入一個新行每隔n-li元素
• 如果需要換行，在UL的寬度 - 元素（或DIV-元件圍繞着它的增加，所以它不是水平居中）

我下面的代碼示出我的問題：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> 

注：寬度被固定爲500px的插圖pruposes只在的jsfiddle。它應該是90％或類似的。

在上面的例子，線路符元件3，6，9和12之後自動插入但它自動增加周邊div的大小，所以我旁邊元件3,6的空的空間， 9和12。因此，這是不可能的水平居中股利:(

我想是這樣的：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> 

但正如我已經提到的，我不能插入換行符在每個第n個元素之後，因爲我想盡可能多地顯示每行的li元素，具體取決於瀏覽器的寬度。

我希望任何人都知道我的一個很好的解決問題:)

Answer 1

「鋰項目的寬度是固定的」

然後，只需使用CSS媒體查詢與瀏覽器和檢測看看有多少個列表項目可以適合。

有在互聯網的屏幕分辨率使用統計數據。所以你看到最常用的寬度，並使您的網站看起來不錯，如： 1366,1920,1280,1440,1600,1024,1680,1360