javascript - HTML:水平居中元素数量未知的未排序列表

Question

我正在处理一个页面，我想在该页面上使用 ul/li html 标记列出未知数量的元素。我想要的是以下内容:

• 列表应尽可能横向使用
• 列表应水平居中，即使需要换行(最右边的 li 条目的右侧没有空格)
• li-items的宽度是固定的
• li 元素是左对齐的

但是我遇到了一些问题:

• 换行符取决于浏览器的大小，所以我不能说我要在每个第 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，仅在 jsfiddle 上用于说明目的。它应该是 90% 或类似的。

在上面的示例中，在元素 3、6、9 和 12 之后自动插入换行符。但它会自动增加周围 div 的大小，所以我在元素 3、6、9 旁边有一个空白区域和 12. 因此，不可能将 div 水平居中 :(

我想要的是这样的: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

“li-items的宽度是固定的”

然后只需使用 CSS 媒体查询来检测浏览器的 with 并查看有多少列表项将适合。

互联网上有屏幕分辨率使用统计。因此，您会看到最常用的宽度，并使您的网站在以下宽度上看起来不错:1366, 1920, 1280, 1440, 1600, 1024, 1680, 1360