Question

如果您访问该页面，则可以看到列表（ul）只是垂直列出的

我想分别在三列中分别列出第1,2,3季（如下所示）

S01E01   S02E01  S01E01
S01E02   S02E02  S01E02
S01E03   S02E03  S01E03

另一个问题是列表的宽度，在站点中，列表的某些项部分位于下一行。

    S01 E03 · The Would-Be Prince of
Darkness

像这样（像在网络上一样）

它受到宽度的影响

.tv  {
list-style: none;
width: 300px;
border-radius: 2px;
}

当我将宽度设置为更高时，长行完成，但同一行中显示的短项很少

我需要解决这两个问题

Answer 1

  display: grid;
  grid-template-columns: 20% 20% 60%;

Answer 2

Dude尝试将每个“ ul”（包括每个季节）放入div，并赋予div这个属性

div{
        float:left;
        width: 30%;
    }

或者也许看看这个测试代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
    html, body{
        font-family: "Verdana";
    }
    div{
        float:left;
        width: 30%;
    }
</style>
</head>
<body>
<div><h1>HELLO</h1></div>
<div><h1>HELLO</h1></div>
<div><h1>HELLO</h1></div>
</body>
</html>

如何将列表分为3列

2 个答案: