css - 如何对齐包裹在两行上的左标签

Question

我有一个无序列表的标签。我想像这张照片一样在左侧的 CSS 中对齐它们(我现在不能发布图片):

https://imgur.com/qipYkCA.png

但到目前为止，我只能做到这一点:

https://imgur.com/qGdosEw.png

<ul class="badge-list">
  <li>Sci-Fi</li>
  <li>Adventure</li>
  <li>Crime</li>
  <li>Novels</li>
  <li>Children</li>
  <li>Drama</li>
  <li>Historical</li>
</ul>

样式:

.badge-list {
  .li {
    list-style-type:none;
    display: inline-block;
  }
  .li+.li {margin-left: 5px}
}

如何让第二行左对齐？

Answer 1

.li+.li {margin-left: 5px} 是问题所在，在左侧插入边距。为什么不把 margin 放在他们的右边？ .li {margin-right: 5px}