使用 space CSS 制作列表元素块

Question

我想用列表元素之外的空格制作单独的块。目前元素之间没有距离，我无法构建我需要的块。我附上一张图片来说明我的意思。

我需要在 CSS 做什么？

li {
  float: left;
  border: 3px solid grey;
}

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

Answer 1

在列表周围添加边距，

li { 边距：4px； }

Answer 2

ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

ul li {
  border: 1px solid black;
  margin: 10px;
}

<ul>
  <li>
    A
  </li>
  <li>
    A
  </li>
  <li>
    A
  </li>
  <li>
    A
  </li>
  <li>
    A
  </li>

</ul>

您的HTML无效。 li 应该替换 p 标签。为此尝试使用 flex。您也可以在现有代码中使用边距。

保证金：

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul li {
  border: 1px solid black;
  margin: 10px;
  float: left;
}

<ul>
  <li>
    A
  </li>
  <li>
    A
  </li>
  <li>
    A
  </li>
  <li>
    A
  </li>
  <li>
    A
  </li>

</ul>

Answer 3

使用CSS网格

ul {
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  justify-content:center;
  gap: 15px;
  list-style:none;
}

li {
 border:1px solid;
}

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

使用 space CSS 制作列表元素块

make list element blocks with space CSS

html

css

space

list