主页 / 问题 / 936392
Accepted
Gagablik
Asked:2020-01-25 06:41:38 +0000 UTC2020-01-25 06:41:38 +0000 UTC

使用 Grid 将列表变成一行

  • 772

我不知道如何使用 Grid 将列表变成一行（LI 元素的数量未知，它是自动生成的）

ul {
  display:grid;
}
<ul>
    <li><a href="#">item-1</a></li>
    <li><a href="#">item-2</a></li>
    <li><a href="#">item-3</a></li>
    <li><a href="#">item-4</a></li>
    <li><a href="#">item-5</a></li>
</ul>

css

2 个回答

  1. Best Answer

    一般重复，即重复一个分数五次

    li {
  list-style: none;
}

a {
  text-decoration: none;
  font-size: 1.4em;
}

ul {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
    <ul>
  <li><a href="">link1</a></li>
  <li><a href="">link2</a></li>
  <li><a href="">link3</a></li>
  <li><a href="">link4</a></li>
  <li><a href="">link5</a></li>
</ul>

    • 4 
  2. grid-auto-columns: min-content;
grid-auto-flow: column;
    • 1

相关问题