在CSS网格内将ul左对齐

Question

我正在尝试使CSS网格内的列表左对齐。但是，文本对齐以及设置边距和填充似乎不起作用。我如何左对齐ul列表。 Codepen：https://codepen.io/centem/pen/oNvZLgP谢谢。

ul {
  list-style: none;
  text-align: left;
}

li {
  padding-left: 0;
  margin-left: 0;
}

Answer 1

使用下面的CSS

ul{
  padding-left: 2%; 
}

您可以根据需要相应地更改填充值。

Answer 2

此外，如果您希望列表项完全向左对齐，请摆脱padding选择器下面的.grid-page > div行：

padding: 0px 20px;

Answer 3

要完成“不是机器人”的答案（总是很高兴知道为什么会起作用），问题背后的原因是默认的无序列表填充。

UL Default CSS Values

使用这些值可以使列表看起来像书面文档列表，但是显然，在很多情况下这不是我们想要的。

通常，应重置元素的边距和填充。就您而言：

ul {
  padding: 0;
}

应该足够了，因为您已经为容器设置了填充。