Как разделить список на 3 столбца - PullRequest
Новая
       10

Как разделить список на 3 столбца

0 голосов
/ 11 января 2019

Проект CodePen

Если вы посетите страницу, вы увидите, что список (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;
}

когда я установил ширину выше, длинные строки завершены, но несколько коротких элементов отображаются в одной строке

Мне нужно исправить эти две проблемы

Ответы [ 2 ]

0 голосов
/ 11 января 2019

Чувак Попробуй поместить каждое '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>
0 голосов
/ 11 января 2019 
  display: grid;
  grid-template-columns: 20% 20% 60%;
...