Question

我正在使用ul / li html标记在我想要列出未知数量项目的页面上工作。我想要的是以下内容：

列表应尽可能使用水平
列表应该水平居中，即使需要换行符（最右边的li-entries右侧没有空格）
li项目的宽度是固定的
li元素左对齐

但我遇到了一些问题：

换行符取决于浏览器的大小，所以我不能说我要在每个nth-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旁边有一个空白区域因此，不可能将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

＆＃34; li项的宽度是固定的＆＃34;

然后只使用CSS媒体查询来检测浏览器的内容并查看适合的列表项数量。

Internet中有屏幕分辨率使用情况统计信息。所以你看到最常用的宽度，让你的网站看起来很好，如： 1366,1920,1280,1440,1600,1024,1680,1360

HTML：水平排列未知数量元素的未排序列表

1 个答案: