css - 无法在 HTML、CSS 中的文章标签内定位不同的列表项

Question

我想在文章标签内一起显示一些信息。在搜索并查看了相当多的示例后，我决定将信息显示在inlined list items 中。下面是我将如何做到这一点。看看数字 1 和 2。我的最终结果最好是数字 1。我显示数字 2 只是为了看看其他元素需要多少空间<p> </p>。

这是css代码。这是使用此 css的html代码。列表项占用了更多空间，我希望该框保持数字 2 的大小。所以我认为如果可以最小化额外的黄色空间会更好。

我尝试对 3 个列表项使用单独的 div。那没有帮助。我是使用 CSS 的新手。知道如何节省空间并使其看起来足够好吗？

更新：添加后

ul {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;

}

目前它看起来像这样： 显着改善。知道如何最小化左侧的空间吗？

Answer 1

间距是由于 ul 元素的默认顶部和底部边距为 16px。 更新：最终解决方案

ul { 
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
}

我最初会将这些设置为 0 以证明这是问题所在，然后将它们增加到合理的值。

字体大小也稍大一些（对于 li 的）。